React生命週期詳解

這篇文章我們將討論React元件的生命週期

一、元件的生命週期分成三個狀態：

• Mounting:已掛載到真實DOM
• Updating:正在重新渲染
• Unmounting:已移出真實DOM

二、生命週期方法：

Mounting

• construtor() 元件的建構函式在掛載之前呼叫
• conponentWillMount() 在渲染前呼叫
• render() 元件初次渲染
• componentDidMount() 第一次渲染後呼叫，可以通過findDOMNode() 來進行訪問。如果你想和其他js框架一起使用，可以在這個方法呼叫setTimeout,setInerval()或者傳送AJAX請求等操作（防止非同步操作阻塞UI）

Updating

• componentWillRecevieProps() 元件接收到一個新的props時被呼叫。這個方法在初始化render時不會呼叫
• shouldComponentUpdate() 返回一個布林值。在元件接收到新的props或者state時被呼叫。初始化時不會呼叫
• componentWillUpdate() 元件接收到新的props或者state但還沒有render時被呼叫。初始化時不會呼叫
• render() 重新渲染
• componentDidUpdate() 在元件完成更新後立即呼叫。初始化時不會呼叫

Unmounting

• componentWillUnmount() 元件從DOM中移出的時候立即呼叫

三、在渲染前可以使用的部分API

• getDefaultProps 設定預設的prop值
• getInitialState 設定初始state

四、Demo

demo1

    <script type="text/jsx">
        var MessageBox = React.createClass({
            getDefaultProps:function(){
                console.log('getDefaultProps');
                return {};
            },
            getInitialState:function(){
                console.log('getInitialState');
                return {
                    count: 0,
                }
            },
            componentWillMount:function(){
                console.log('componentWillMount');

            },
            componentDidMount:function(){
                console.log('componentDidMount')
                var self = this;

                this.timer = setInterval(function(){
                    self.setState({
                        count: self.state.count + 1,
                    })
                },1000);
                console.log(this.getDOMNode(), this.state.count);
            },
            componentWillUnmount: function(){
                alert('you are tring to kill me !! ')

                clearInterval(this.timer);

            },
            killMySelf: function(){
                React.unmountComponentAtNode(  document.getElementById('app') );
            },
            render:function(){  
                console.log('渲染')
                return ( 
                    <div>
                        <h1 > 計數： {this.state.count}</h1> 
                        <button onClick={this.killMySelf}>解除安裝掉這個元件</button>
                        <Submessage/>
                    </div>
                )
            }
        });

        var Submessage = React.createClass({
            render:function(){
                return (
                    <h3>寫程式碼很有意思</h3>
                )
            }
        });


        var messageBox = React.render( <MessageBox/>, 
            document.getElementById('app')
        )


    </script>

demo2

    <script type="text/jsx">
        var MessageBox = React.createClass({
            getInitialState:function(){
                return {
                    count: 0,
                }
            },
            getDefaultProps:function(){
            },
            shouldComponentUpdate:function(nextProp,nextState){
                console.log('shouldComponentUpdate');
                if(nextState.count > 10) return false;

                return true;
            },
            componentWillUpdate:function(nextProp,nextState){
                console.log('componentWillUpdate');
            },
            componentDidUpdate:function(){
                console.log('componentDidUpdate');
            },
            killMySelf: function(){
                React.unmountComponentAtNode(  document.getElementById('app') );
            },
            doUpdate:function(){
                this.setState({
                    count: this.state.count + 1,
                });
            },
            render:function(){  
                console.log('渲染')
                return ( 
                    <div>
                        <h1 > 計數： {this.state.count}</h1> 
                        <button onClick={this.killMySelf}>解除安裝掉這個元件</button>
                        <button onClick={this.doUpdate}>手動更新一下元件（包括子元件）</button>
                        <Submessage count={this.state.count}/>
                    </div>
                )
            }
        });

        var Submessage = React.createClass({
            componentWillReceiveProps:function(nextProp){
                console.log('子元件將要獲得prop');
                
            },
            shouldComponentUpdate:function(nextProp,nextState){
                if(nextProp.count> 5) return false;
                return true;
            },
            render:function(){
                return (
                    <h3>當前計數是：{this.props.count}</h3>
                )
            }
        });


        var messageBox = React.render( <MessageBox/>, 
            document.getElementById('app')
        )
    </script>