React中的setState

setState為什麽需要異步?

• 無法限制何時使用異步,多次連續使用setState
• 防止多次渲染,異步rendering不僅僅是性能上的優化，而且這可能是react組件模型在發生的根本性的改變

this.setState({
    inputTxt:‘‘
})
console.log(this.state.inputTxt); //立即打印不出inputTxt:‘‘

如果我們要立即打印出inputTxt的變化需要通過setTimeout打印出來

  this.setState({
      inputTxt:‘‘
 })
setTimeout(function(){
     console.log(this.state.inputTxt);
 },0)

或者:

 this.setState({
     inputTxt:‘‘
},()=>{
     console.log(this.state.inputTxt);
})

setState最終會通過this.render 返回newVnode,然後通過patch函數和preVnode進行對比,從而重新渲染html

Vue中的屬性變化

vue中屬性變化,首先觸發Object.defineProperty中屬性的set監聽,執行updateComponent方法(異步),通過vm._render()更新vNode(新舊node對比),最後渲染到html中

淺談React、Vue 部分異步