### 更新過程 當組件被裝載到DOM樹上之后，用戶在網頁上可以看到組件的第一印象，但是要提供更好的交互體驗，就要讓該組件可以隨著用戶操作改變展現的內容，當props或者state被修改的時候，就會引發組件的更新過程。更新過程會依次調用下面的生命周期函數，其中render函數和裝載過程一樣，沒有差別。 在更新時也會觸發5個鉤子函數： 1. componentWillReceivePorps(nextProps) 組件初始化時不調用，組件接受新的props時調用。 2. shouldComponentUpdate(nextProps, nextState) react性能優化非常重要的一環。組件接受新的state或者props時調用，我們可以設置在此對比前后兩個props和state是否相同，如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤其是在dom結構復雜的時候。不過調用this.forceUpdate會跳過此步驟。 3. componentWillUpdata(nextProps, nextState) 組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state 4. render() 頁面渲染 5. componentDidUpdate() 組件初始化時不調用，組件更新完成后調用，此時可以獲取dom節點。 不過，并不是所有的更新過程都會執行全部函數，下面會介紹到各種特例。 #### 1. componentWillReceiveProps（nextProps） 只要是父組件的render函數被調用，在render函數里面被渲染的子組件就會經歷更新過程，不管父組件傳給子組件的props有沒有改變，都會觸發子組件的componentWill-ReceiveProps函數。 注意，通過this.setState方法觸發的更新過程不會調用這個函數，這是因為這個函數適合根據新的props值（也就是參數nextProps）來計算出是不是要更新內部狀態state。 #### 2.shouldComponentUpdate（nextProps，nextState） shouldComponentUpdate函數是React生命周期中非常重要的一個函數。因為如果說render函數很重要，是因為render函數決定了該渲染什么，而說shouldComponentUpdate函數重要，是因為它決定了一個組件什么時候不需要渲染。 在更新過程中，React庫首先調用shouldComponentUpdate函數，如果這個函數返回true，那就會繼續更新過程，接下來調用render函數；反之，如果得到一個false，那就立刻停止更新過程，也就不會引發后續的渲染了。 說shouldComponentUpdate重要，就是因為只要使用恰當，他就能夠大大提高React組件的性能，雖然React的渲染性能已經很不錯了，但是，不管渲染有多快，如果發現沒必要重新渲染，那就干脆不用渲染好了，速度會更快。 比如如下代碼: ```js shouldComponentUpdate(nextProps, nextState) { return (nextProps.caption !== this.props.caption) || (nextState.count !== this.state.count); } ``` 僅當下一個狀態傳入的 caption 與當前狀態的 caption 不一致，或者以一個自身狀態的 count 與當前狀態的 count 不一致時，才執行接下來的生命周期函數。 #### 3. componentWillUpdate 和 componentDidUpdate 如果組件的 `shouldComponentUpdate` 函數返回 true，React接下來就會依次調用對應組件的 `componentWillUpdate`、`render` 和 `componentDidUpdate` 函數。