React入門--------組件的聲明周期

標籤：false   傳回值   function   document   nbsp   表示   執行   end   改變   

• Mounting/組件掛載相關:

componentWillMount

componentDidMount

• Updating/組件更新相關:

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

• Unmounting/組件移除相關:

componentWillUnmount

一、Mounting/組件掛載相關

componentWillMount

在組件掛載之前執行，但僅執行一次，即使多次重複渲染改組件，或者改變了組件的state。若希望該回到能執行多次，可以使用ReactDOM.unmountComponentAtNode移除掉已有的組件，然後再重新render。

    var diva = document.getElementById(‘a‘);    var divb = document.getElementById(‘b‘);    var i=0;    var Component1 = React.createClass({        componentWillMount:function(){            console.log(++i)        },        render: function() {            console.log(Date.now());            return <div name={this.props.name}>我只是一個安靜的div</div>        }    });    
　　//觸發componentWillMount,render    ReactDOM.render(               <Component1 />, diva    );
　　
　　//未觸發componentWillMount,觸發render    ReactDOM.render(               <Component1 />, diva    );    
　　//觸發componentWillMount,render    ReactDOM.render(              <Component1 />, divb    );
　　//未觸發componentWillMount,未觸發render   ReactDOM.render(              <Component1 />, divb    );

componentDidMount

在組件掛載之後執行，同componentWillMount一樣，同一個組件重複渲染只執行一次，卸載組件後重新渲染可以重新觸發一次。

二、Updating/組件更新相關

componentWillReceiveProps

在組件接收到props的時間點之前調用，注意組件初始化渲染時不會調用。

    var i = 0;    var div = document.getElementById(‘a‘),    var div2 = document.getElementById(‘b‘);    var Component1 = React.createClass({        componentWillReceiveProps: function(){            console.log(i++)        },        clickCb: function() {            React.render(                <Component1 />, div2            );        },        render: function() {            return <div onClick={this.clickCb}>點我給下一個div掛載組件</div>        }    });    React.render(        <Component1 />, div  //初始化不會觸發componentWillReceiveProps    );    React.render(            <Component1 />, div   //重複渲染會觸發componentWillReceiveProps    );    React.unmountComponentAtNode(div);  //移除掉已有組件    React.render(        <Component1 />, div  //初始化不會觸發componentWillReceiveProps    );

運行結果如下：

該介面帶有一個參數nextProps，可以利用它來擷取新的props的值(this.props擷取到的是當前的，也就是舊的props)

  var i = 0;  var div = document.getElementById(‘a‘);  var render = function(){            React.render(                    <Component1 i={i++} />, div            );        };    var Component1 = React.createClass({        componentWillReceiveProps: function(nextProps){            console.log(this.props.i, nextProps.i)        },        render: function() {            return <div onClick={render}>props.i的值是：{this.props.i}</div>        }    });    render();

運行結果如下

shouldComponentUpdate

該介面實際是在組件接收到了新的props或者新的state的時候會立即調用，然後通過傳回值來決定是否要重新渲染當前的組件。

介面帶兩個參數，第一個參數表示新的props，第二個參數表示新的state。

  var div = document.getElementById(‘a‘);  var Component1 = React.createClass({        getInitialState: function(){            return { i : 0 }        },        shouldComponentUpdate: function(nextProps, nextState){            console.log( this.state.i, nextState.i );            return nextState.i > 3 ? true : false; //返回true才會渲染組件        },        clickCb: function(){            this.setState({                i : this.state.i + 1            })        },        render: function() {            return <div onClick={this.clickCb}>state.i的值是：{this.state.i}</div>        }    });    ReactDOM.render(            <Component1 />, div    );

點擊第四次之後才會渲染組件，在div裡顯示正確的新state.i

 

componentWillUpdate

同shouldComponentUpdate一樣，在組件收到新的props或者state的時候會調用，而且也有著兩個參數來擷取新的props和state。

不過本介面僅在shouldComponentUpdate執行並返回了true的時候才會被調用。

在上一個代碼執行個體中做點改動

 componentWillUpdate: function(nextProps, nextState){            console.log( ‘yoyoyo‘, this.state.i, nextState.i );        },

componentDidUpdate

在組件更新，重新渲染完畢之後調用，它和componentWillUpdate一樣有著兩個參數來擷取新的props和state

 var div = document.getElementById(‘a‘);    var Component1 = React.createClass({        getInitialState: function(){            return { i : 0 }        },        shouldComponentUpdate: function(nextProps, nextState){            console.log( this.state.i, nextState.i );            return nextState.i > 3 ? true : false; //返回true才會執行componentWillUpdate並重新渲染組件        },        componentDidUpdate: function(nextProps, nextState){            console.log( ‘已經渲染完畢咯‘, this.state.i, nextState.i );        },        componentWillUpdate: function(nextProps, nextState){            console.log( ‘還沒渲染哦‘, this.state.i, nextState.i );        },        clickCb: function(){            this.setState({                i : this.state.i + 1            })        },        render: function() {            return <div onClick={this.clickCb}>state.i的值是：{this.state.i}</div>        }    });    ReactDOM.render(            <Component1 />, div    );

運行結果如下：

三、Unmounting/組件移除相關：

明天繼續

React入門--------組件的聲明周期