React Component Lifecycle

by koba04

HTML

<script src="http://react.zpao.com/builds/master/latest/react-with-addons.js"></script>
<script src="http://react.zpao.com/builds/master/latest/JSXTransformer.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="app"></div>

JavaScript 1.7

var Lifecycle = React.createClass({
    getInitialState: function() {
        return { message: 'init'};
    },
    componentWillMount: function() {
        console.log('componentWillMount');
    },
    componentDidMount: function() {
        console.log('componentDidMount');
    },
    componentWillReceiveProps: function() {
        console.log('componentWillReciveProps');
    },
    shouldComponentUpdate: function() {
        console.log('shouldComponentUpdate');
        return true;
    },
    componentWillUpdate: function() {
        console.log('componentWillUpdate');
    },
    componentDidUpdate: function() {
        console.log('componentDidUpdate');
    },
    componentWillUnmount: function() {
        console.log('componentWillunmount');
    },
    updateState: function() {
        console.log('setState');
        this.setState({message: 'xxx'});
    },
    updateProps: function() {
        console.log('Prop');
        this.setProps({name: 'Space'});
    },
    render: function() {
        console.log('render');
        return <div>
            Hello {this.props.name} - {this.state.message}
            <button onClick={this.updateState}>setState</button>
            <button onClick={this.updateProps}>setProps</button>
        </div>;
    }
});
 
React.render(<Lifecycle name="World" />, document.getElementById('app'));