附实例！图解React的生命周期及执行顺序
作者：前端林子
1.七個可選的生命周期
可以結合下圖來看：
(1) componentWillMount() 僅在render()方法前被調用一次，如果在該方法中調用了setState方法去改變組件的狀態值，那么調用render()后，將會直接看到改變過了的狀態值，并且不論狀態值怎么改變，componentWillMount()都不會再被調用。
(2) componentDidMount() 僅在render()方法后被立即調用一次（客戶端），相對于父組件而言，該方法在子組件中會先被調用。如果需要使用一些JaveScript框架或者類似于setInterval()這樣的方法，建議在該方法內使用。
(3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染調用render()方法時不會被調用，后面在接受到新的state或者props時，在render()方法前被調用。為防止一些潛在的bug，該方法默認總是返回true。如果你確定state及props改變后不需要渲染組件，那么也可以指定返回false，需要注意的是，這樣的結果會導致后面的render()、componentWillUpdate()、componentDidUpdate()都不會被調用。
一般的，我們可以通過該函數來優化性能：
一個React項目需要更新一個小組件時，很可能需要父組件更新自己的狀態。而一個父組件的重新更新會造成它旗下所有的子組件重新執行render()方法，形成新的虛擬DOM，再用diff算法對新舊虛擬DOM進行結構和屬性的比較，決定組件是否需要重新渲染
無疑這樣的操作會造成很多的性能浪費，所以我們開發者可以根據項目的業務邏輯，在shouldComponentUpdate()中加入條件判斷，從而優化性能
例如React中的就提供了一個PureComponent的類，當我們的組件繼承于它時，組件更新時就會默認先比較新舊屬性和狀態，從而決定組件是否更新。值得注意的是，PureComponent進行的是淺比較，所以組件狀態或屬性改變時，都需要返回一個新的對象或數組
(4) componentWillReceiveProps(object nextProps) 在初始渲染調用render()方法時不會被調用，當接收到一個新的props時，該方法被調用。我們都知道，如果改變一個狀態的值，則會觸發render()方法，所以可以在這個方法里調用setState()方法去改變一個狀態的值，當該方法接收到新的props時，setState()就可以避免一次額外的render()了。 在這個方法里，尤其需要注意一點，就是接收到新的props一定會觸發render()方法，但是render()方法被觸發不一定是因為接收到了新的props
(5) componentWillUpdate(object nextProps, object nextState) 在初始渲染調用render()方法時不會被調用，當接收到新的props及state時，在render()方法之前被調用。
不要在此方法再去更新props 或者 state
(6) componentDidUpdate(object prevProps, object prevState) 在初始渲染調用render()方法時不會被調用，當組件更新被刷新到DOM之后被立即調用。
可以在這里訪問，并修改 DOM
(7) componentWillUnmount() 在組件從DOM上卸載前被調用，在這個方法里面，我們主要是完成一些清除操作，比如說清除掉一些過時了的定時器等。
2.執行順序及次數
(1) getDefaultProps()，調用1次
(2) getInitialState()，調用1次
(3) componentWillMount()，調用1次
(4) render()，調用>=1次
(5) componentDidMount()：僅客戶端，調用1次
(6) componentWillReceiveProps(object nextProps)，調用>=0次
(7) ShouldComponentUpdate(object nextProps, object nextState)，調用>=0次
(8) componentWillUpdate(object nextProps, object nextState)，調用>=0次
(9) render()，調用>=1次
(10) componentDidUpdate(object prevProps, object prevState)，調用>=0次
(11) componentWillUnmount()，調用1次
3.實例
我寫了一個小demo可直接在瀏覽器里運行，大家可以通過控制臺查看父組件、子組件中的各生命周期調用的順序：
<!DOCTYPE html><html><head><script src="https://fb.me/react-15.2.0.js"></script><script src="https://fb.me/react-dom-15.2.0.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script></head><body><div id="app-container"></div><script type="text/babel">var SubCounter = React.createClass({componentWillReceiveProps:function() {console.log('9、子組件將要接收到新屬性');},shouldComponentUpdate:function(newProps, newState) {console.log('10、子組件是否需要更新');if (newProps.number < 5) return true;return false},componentWillUpdate:function() {console.log('11、子組件將要更新');},componentDidUpdate:function() {console.log('13、子組件更新完成');},componentWillUnmount:function() {console.log('14、子組件將卸載');},render:function() {console.log('12、子組件掛載中');return (<p>{this.props.number}</p>)}});var Counter = React.createClass({getInitialState:function(){return(this.state={number:0})},componentWillMount:function(){console.log('3、父組件掛載之前');},componentDidMount:function(){console.log('5、父組件掛載完成');},shouldComponentUpdate:function(newProps, newState) {console.log('6、父組件是否需要更新');if (newState.number<15) return true;return false},componentWillUpdate:function() {console.log('7、父組件將要更新');},componentDidUpdate:function() {console.log('8、父組件更新完成');},handleClick : function(){this.setState({number: this.state.number + 1})},render:function() {console.log('4、render(父組件掛載)');return (<div><p>{this.state.number}</p><button onClick={this.handleClick}>+</button>{this.state.number<10?<SubCounter number={this.state.number}/>:null}</div>)}}); ReactDOM.render(<Counter />, document.getElementById('app-container'));</script></body></html>點擊一次按鈕，通過控制臺可以看到：
4.小結
本文主要是圖文結合地介紹了react的生命周期及執行順序，同時附上了一個實例，可以清楚地看到父組件、子組件的調用順序。如存在問題，歡迎指正~~~
此文已由騰訊云+社區在各渠道發布
獲取更多新鮮技術干貨，可以關注我們騰訊云技術社區-云加社區官方號及知乎機構號
總結
以上是生活随笔為你收集整理的附实例！图解React的生命周期及执行顺序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设计模式之-工厂方法模式
- 下一篇： zabbix告警时间和恢复时间相同的解决