深入了解React（十二、生命周期2）

import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class App extends React.Component {
    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old State'
        };

        alert('constructor');
        console.log('初始化数据---------constructor---------');
    }

    // 组件将要加载
    componentWillMount() {
        alert('componentWillMount');
        console.log('componentWillMount');
    }

    // 组件加载完成
    componentDidMount() {
        alert('componentDidMount');
        console.log('componentDidMount');
    }

    // 将要接收父组件穿来的props
    componentWillReceiveProps() {
        alert('componentWillReceiveProps');
        console.log('componentWillReceiveProps');
    }

    // 子组件是不是应该更新
    shouldComponentUpdate() {
        alert('shouldComponentUpdate');
        console.log('shouldComponentUpdate');
        // true表示要更新，false表示不要更新
        return true;
        // return false;
    }

    // 组件将要更新
    componentWillUpdate() {
        alert('componentWillUpdate');
        console.log('componentWillUpdate');
    }

    // 组件更新完成
    componentDidUpdate() {
        alert('componentDidUpdate');
        console.log('componentDidUpdate');
    }

    // 处理点击事件
    handleClick() {
        console.log('更新数据---------handleClick---------');
        this.setState({
            data: 'New State'
        });
    }

    // 渲染
    render() {
        alert('render');
        console.log('render');
        return (
            <div>
                <div>App</div>
                <p>
                    <button onClick={() => {
                        this.handleClick()
                    }}>更新组件
                    </button>
                </p>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        {/*<Component></Component>*/}
        <App></App>
    </div>,
    document.getElementById('app')
);

执行顺序：
1、初始化数据———constructor———
2、componentWillMount
3、render
4、componentDidMount
点击按钮后（return true）：
5、更新数据———handleClick———
6、shouldComponentUpdate
7、componentWillUpdate
8、render
9、componentDidUpdate
点击按钮后（return false）：
5、更新数据———handleClick———
6、shouldComponentUpdate