React component life cycle processes

‘Use strict’;
React.createClass ({
    // 1. Creation stage
    getDefaultProps: function () {
        // Called when creating a class
        console.log (‘getDefaultProps’);
        return {};
    },
    // 2. The instantiation phase
    getInitailState: function () {
        // Get the default value of this.state
        console.log (‘getInitailState’);
        return {};
    },
    componentWillMount: function () {
        // Call before render
        // The processing of business logic is put here, such as the operation of state
        console.log (‘componentWillMount’);
    },
    render: function () {
        // Render and return a virtual DOM
        console.log (‘render’);
        return (
            <h1> {this.props.value} </ h1>
        );
    },
    componentDidMount: function () {
        // This method occurs after the render method.
        // Here React will use the virtual DOM object returned by the render method to create a real DOM structure
        console.log (‘componentDidMount’);
    },
    // 3. Update stage
    componentWillRecieveProps: function () {
        // This method occurs after this.props is modified or the parent component calls setProps () method
        console.log (‘componentWillRecieveProps’);
    },
    shouldComponentUpdate: function () {
        // Do you need to update
        console.log (‘shouldComponentUpdate’);
        return true;
    },
    componentWillUpdate: function () {
        // will update
        console.log (‘componentWillUpdate’);
    },
    componentDidUpdate: function () {
        //update completed
        console.log (‘componentDidUpdate’);
    },
    // 4. Destruction phase
    componentWillUnmount: function () {
        // Called when destroyed
        console.log (‘componentWillUnmount’);
    }
}); 

React component life cycle processes