React(三)組件的生命週期

標籤：this   成功   sel   lib   包括   life   nts   bsp   babel   

Component Specs and LifeCycle

<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-dom.min.js"></script><script src="lib/babel-core/browser.min.js"></script><script type="text/babel">    var MessageBox = React.createClass({        getInitialState: function () {            return {                count: 0            }        },        componentWillMount: function () {            console.log(‘componentWillMount‘);            var self = this;            this.timer = setInterval(function () {                self.setState({                    count: self.state.count + 1                });            }, 1000);        },        componentDidMount: function () {            console.log(‘componentDidMount‘);            console.log(this);        },        componentWillUnmount: function () {            console.log(‘卸載掉組件‘);            clearInterval(this.timer);        },        render: function () {            return (                <div>                    <h1>{this.state.count}</h1>                </div>            );        }    });    var messagebox = ReactDOM.render(        <MessageBox/>,        document.getElementById(‘app‘)    );</script>

<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-dom.min.js"></script><script src="lib/babel-core/browser.min.js"></script><script type="text/babel">    var MessageBox = React.createClass({        getInitialState: function () {            return {                count: 0            }        },        getDefaultProps: function () {        },        /*componentWillMount: function () {        },        componentDidMount: function () {        },        componentWillUnmount: function () {        },        */        shouldComponentUpdate: function (nextProp, nextState) {            console.log(‘shouldComponentUpdate‘);            if(nextState.count > 3) return false;            return true; // 必須返回一個true或者false        },        componentWillUpdate: function (nextProp, nextState) {            console.log(‘componentWillUpdate‘);        },        componentDidUpdate: function () {            console.log(‘成功更新啦‘);        },        doUpdate: function () {            this.setState({                count: this.state.count + 1            });        },        render: function () {            return (                <div>                    <h1>{this.state.count}</h1>                    <button onClick={this.doUpdate}>手動更新一下組件（包括子組件）</button>                    <SubMessage message={this.state.count} />                </div>            );        }    });    var SubMessage = React.createClass({        componentWillReceiveProps: function (nextProp) {            console.log(‘子組件將要獲得prop‘);        },        shouldComponentUpdate: function (nextProp, nextState) {            if(nextProp.message > 2) return false;            return true;        },        render: function () {            return (                <div>                    <h3>{this.props.message}</h3>                </div>            );        }    });    var messagebox = ReactDOM.render(        <MessageBox/>,        document.getElementById(‘app‘)    );</script>

 

React(三)組件的生命週期