react中this.setState的理解


this.setState作用?

react中要修改this.state要使用this.setState,因為this.state只是一個對象,單純的修改state並不會觸發ui更新.

this.setState在修改state的同時,會調用render函數從而觸發組件的更新

(實際上this.setState修改完數據后,在調用的生命周期順序為:shouldComponentUpdate->componentWillUpdate->

render->componentDidUpdate)

 

this.setState寫法?

this.setState有兩個參數,寫法如下:

或者this.setState(()=>{return {msg:’xxx’}},()=>{});

或者this.setState(()=>({msg:’xxx’}),()=>{});

第一個參數是異步執行,第二個參數是異步執行完后執行.

第二個參數的作用是獲取最新的數據和最新的dom,可以用來驗證數據是否修改成功等同於componentDidMount

 

this.setState都是異步的嗎?

由React控制的事件處理程序,以及生命周期函數調用setState不會同步更新state 。

React控制之外的事件中調用setState是同步更新的。比如原生js綁定的事件,setTimeout/setInterval等。

大部分開發中用到的都是React封裝的事件,比如onChange、onClick、onTouchMove等,這些事件處理程序中的setState都是異步處理的

 

 

 

為什么是異步的?

setState異步是因為在state更新量大的時候,可以批量更新state,在一段時間內等待一部分數據更新完,在更新

 

 

this.setState為什么在原聲中是同步的?

因為react自己封裝了一套機制代理原生事件,這就是合成事件,比如onClick,在合成事件中有原生事件沒有的功能,這些多出來的導致setState執行是異步的.而在原生事件也就是非合成事件中是同步的

 

setState執行后觸發了那些函數

我們知道setState執行后會觸發render渲染,但並不只是render這一個生命周期,具體是:

setState->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM