圖解React的生命週期及執行順序

時間 2019-12-04

原文原文鏈接

本文由雲+社區發表html

做者：前端林子前端

1.七個可選的生命週期

能夠結合下圖來看：react

(1) componentWillMount() 僅在render()方法前被調用一次，若是在該方法中調用了setState方法去改變組件的狀態值，那麼調用render()後，將會直接看到改變過了的狀態值，而且不論狀態值怎麼改變，componentWillMount()都不會再被調用。ajax

(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進行結構和屬性的比較，決定組件是否須要從新渲染babel

無疑這樣的操做會形成不少的性能浪費，因此咱們開發者能夠根據項目的業務邏輯，在shouldComponentUpdate()中加入條件判斷，從而優化性能app

例如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('九、子組件將要接收到新屬性');
            },

            shouldComponentUpdate:function(newProps, newState) {
                console.log('十、子組件是否須要更新');
                if (newProps.number < 5) return true;
                return false
            },

            componentWillUpdate:function() {
                console.log('十一、子組件將要更新');
            },

            componentDidUpdate:function() {
                console.log('1三、子組件更新完成');
            },

            componentWillUnmount:function() {
                console.log('1四、子組件將卸載');
            },

            render:function() {
                console.log('十二、子組件掛載中');
                return (
                        <p>{this.props.number}</p>
                )
            }
        });

        var Counter = React.createClass({
           
            getInitialState:function(){
                return(
                    this.state={
                        number:0
                    }
                )
            },

            componentWillMount:function(){
                console.log('三、父組件掛載以前');
            },

            componentDidMount:function(){
                console.log('五、父組件掛載完成');
            },

            shouldComponentUpdate:function(newProps, newState) {
                console.log('六、父組件是否須要更新');
                if (newState.number<15) return true;
                return false
            },

            componentWillUpdate:function() {
                console.log('七、父組件將要更新');
            },

            componentDidUpdate:function() {
                console.log('八、父組件更新完成');
            },

            handleClick : function(){
                this.setState({
                    number: this.state.number + 1
                })
            },
            render:function() {
                console.log('四、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>
複製代碼

點擊一次按鈕，經過控制檯能夠看到：