附例項！圖解React的生命週期及執行順序

騰訊雲加社群發表於2019-02-16
圖解React

本文由雲+社群發表

作者：前端林子

1.七個可選的生命週期

可以結合下圖來看：

img

(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>

點選一次按鈕，通過控制檯可以看到：

img

4.小結

本文主要是圖文結合地介紹了react的生命週期及執行順序，同時附上了一個例項，可以清楚地看到父元件、子元件的呼叫順序。如存在問題，歡迎指正~~~

此文已由騰訊雲+社群在各渠道釋出

獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社群-雲加社群官方號及知乎機構號

相關文章