React嚴格定義了組件的生命周期,生命周期可能會經歷如下三個過程:
·裝載過程(Mount),也就是把組件第一次在DOM樹中渲染的過程;
·更新過程(Update),當組件被重新渲染的過程;
·卸載過程(Unmount),組件從DOM中刪除的過程。
組件渲染
state和prop的改變會驅使組件重新渲染,但是不能簡單的改變state,必須使用this.setState()函數,它會先改變state的值,然后驅動組件更新;但是props值是不應該被修改的,因為如果存在父組件對應多個子組件,某個子組件修改prop值,會導致程序混亂,其它子組件不確定會使用正確的prop值。
組件生命周期
每個組件在網頁中被創建、更新和刪除,擁有自己的生命周期
生命周期可能經歷三個過程:
1.裝載過程(Mount),組件第一次在DOM中渲染的過程
2.更新過程(Update),組件被重新渲染的過程
3.卸載過程(UNmount),組件從DOM匯總刪除的過程
組件創建過程中經歷的函數:
componentWillMount:組件掛載之前執行,只執行一次
componentDidMount: 組件渲染完成,只執行一次
componentWillRecevieProps: 組件將要接收新的props執行
shouldComponentUpdate: 判斷組件是否應該重新渲染,默認是true
componentWillUpdate: 組件將要重新渲染
componentDidUpdate: 組件重新渲染完成
componentWillUnmount: 卸載組件
1.constructor
- 組件生命周期第一個被調用的函數;
- 無狀態組件不需要定義構造函數;
- 初始化state;
- 綁定this的執行環境;
2.componentWillMount
render函數前被調用,但是寫組件的過程中一般不會使用,該函數發生在將要裝載的時候。所有的函數可以在constructor中執行。服器中可以被調用。
3.componentDidMount
render函數之后執行,組件已經掛載到DOM樹上。服務器端不能被調用。適用于一些瀏覽器中才做的邏輯,ajax獲取數據填充函數之類的。
4.組件更新過程 依次調用以下函數
·componentWillReceiveProps
·shouldComponentUpdate
·componentWillUpdate
·render
·componentDidUpdate
5.componentsWillReciveProps (nextProps)
當componets將要接收新的props時這個函數會被調用;
并且父組件函數被調用,render函數里面渲染的子組件會經歷更新過程,無論父組件傳給子組件的props有沒有改變,都會觸發子組件的這個函數。-
6.shouldComponentUpdate(nextProps,nextState)
決定了一個組件什么時候不需要渲染,組件判斷是否重新渲染時調用。