淺談React、Vue 部分異步
阿新 • • 發佈:2018-06-26
rip col ets 函數 打印 settime 最終 out con
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 部分異步