深入了解React（十三、生命周期3-更新组件）

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

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

class Component 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>
                <div>Props:{this.props.data}</div>
                <p>
                    <button onClick={() => {
                        this.handleClick()
                    }}>更新组件
                    </button>
                </p>
            </div>
        );
    }
}

class App extends React.Component {
    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old Props'
        };
        alert('App初始化---------constructor---------');
        console.log('App初始化---------constructor---------');
    }

    // 更新props属性
    onPropsChange() {
        alert('更新props属性');
        console.log('更新props属性');
        this.setState({
            data: 'New Props'
        });
    }

    // 渲染
    render() {
        return (
            <div>
                <Component data={this.state.data}/>
                <p>
                    <button onClick={() => {
                        this.onPropsChange()
                    }}>改变Props
                    </button>
                </p>
            </div>
        )
    }
}

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

点击“改变Props”按钮后：
1、更新props属性
2、componentWillReceiveProps
3、shouldComponentUpdate
4、componentWillUpdate
5、render
6、componentDidUpdate