附实例！图解React的生命周期及执行顺序
作者：前端林子
1.七個可選的生命周期
可以結(jié)合下圖來看：
(1) componentWillMount() 僅在render()方法前被調(diào)用一次，如果在該方法中調(diào)用了setState方法去改變組件的狀態(tài)值，那么調(diào)用render()后，將會直接看到改變過了的狀態(tài)值，并且不論狀態(tài)值怎么改變，componentWillMount()都不會再被調(diào)用。
(2) componentDidMount() 僅在render()方法后被立即調(diào)用一次（客戶端），相對于父組件而言，該方法在子組件中會先被調(diào)用。如果需要使用一些JaveScript框架或者類似于setInterval()這樣的方法，建議在該方法內(nèi)使用。
(3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染調(diào)用render()方法時不會被調(diào)用，后面在接受到新的state或者props時，在render()方法前被調(diào)用。為防止一些潛在的bug，該方法默認(rèn)總是返回true。如果你確定state及props改變后不需要渲染組件，那么也可以指定返回false，需要注意的是，這樣的結(jié)果會導(dǎo)致后面的render()、componentWillUpdate()、componentDidUpdate()都不會被調(diào)用。
一般的，我們可以通過該函數(shù)來優(yōu)化性能：
一個React項目需要更新一個小組件時，很可能需要父組件更新自己的狀態(tài)。而一個父組件的重新更新會造成它旗下所有的子組件重新執(zhí)行render()方法，形成新的虛擬DOM，再用diff算法對新舊虛擬DOM進行結(jié)構(gòu)和屬性的比較，決定組件是否需要重新渲染
無疑這樣的操作會造成很多的性能浪費，所以我們開發(fā)者可以根據(jù)項目的業(yè)務(wù)邏輯，在shouldComponentUpdate()中加入條件判斷，從而優(yōu)化性能
例如React中的就提供了一個PureComponent的類，當(dāng)我們的組件繼承于它時，組件更新時就會默認(rèn)先比較新舊屬性和狀態(tài)，從而決定組件是否更新。值得注意的是，PureComponent進行的是淺比較，所以組件狀態(tài)或?qū)傩愿淖儠r，都需要返回一個新的對象或數(shù)組
(4) componentWillReceiveProps(object nextProps) 在初始渲染調(diào)用render()方法時不會被調(diào)用，當(dāng)接收到一個新的props時，該方法被調(diào)用。我們都知道，如果改變一個狀態(tài)的值，則會觸發(fā)render()方法，所以可以在這個方法里調(diào)用setState()方法去改變一個狀態(tài)的值，當(dāng)該方法接收到新的props時，setState()就可以避免一次額外的render()了。 在這個方法里，尤其需要注意一點，就是接收到新的props一定會觸發(fā)render()方法，但是render()方法被觸發(fā)不一定是因為接收到了新的props
(5) componentWillUpdate(object nextProps, object nextState) 在初始渲染調(diào)用render()方法時不會被調(diào)用，當(dāng)接收到新的props及state時，在render()方法之前被調(diào)用。
不要在此方法再去更新props 或者 state
(6) componentDidUpdate(object prevProps, object prevState) 在初始渲染調(diào)用render()方法時不會被調(diào)用，當(dāng)組件更新被刷新到DOM之后被立即調(diào)用。
可以在這里訪問，并修改 DOM
(7) componentWillUnmount() 在組件從DOM上卸載前被調(diào)用，在這個方法里面，我們主要是完成一些清除操作，比如說清除掉一些過時了的定時器等。
2.執(zhí)行順序及次數(shù)
(1) getDefaultProps()，調(diào)用1次
(2) getInitialState()，調(diào)用1次
(3) componentWillMount()，調(diào)用1次
(4) render()，調(diào)用>=1次
(5) componentDidMount()：僅客戶端，調(diào)用1次
(6) componentWillReceiveProps(object nextProps)，調(diào)用>=0次
(7) ShouldComponentUpdate(object nextProps, object nextState)，調(diào)用>=0次
(8) componentWillUpdate(object nextProps, object nextState)，調(diào)用>=0次
(9) render()，調(diào)用>=1次
(10) componentDidUpdate(object prevProps, object prevState)，調(diào)用>=0次
(11) componentWillUnmount()，調(diào)用1次
3.實例
我寫了一個小demo可直接在瀏覽器里運行，大家可以通過控制臺查看父組件、子組件中的各生命周期調(diào)用的順序：
<!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.小結(jié)
本文主要是圖文結(jié)合地介紹了react的生命周期及執(zhí)行順序，同時附上了一個實例，可以清楚地看到父組件、子組件的調(diào)用順序。如存在問題，歡迎指正~~~
此文已由騰訊云+社區(qū)在各渠道發(fā)布
獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號及知乎機構(gòu)號
總結(jié)
以上是生活随笔為你收集整理的附实例！图解React的生命周期及执行顺序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设计模式之-工厂方法模式
- 下一篇： zabbix告警时间和恢复时间相同的解决