React(三)组件的生命周期

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>