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

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

本文由雲+社群發表

作者:前端林子

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的生命週期及執行順序,同時附上了一個例項,可以清楚地看到父元件、子元件的呼叫順序。如存在問題,歡迎指正~~~

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

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

相關文章