react也有不少的生命周期函数，直观的感受就是比vue的名字长,大多前缀为component。

我们完全可以将constructor、render视为生命周期函数。

React生命周期函数

总的流程图：

首次渲染视图

围绕着Mount和constructor、render，组件完成首次渲染。Will和Did可以类比为

    constructor(el) {
        console.log('constructor');
        super(el)
        this.state = {
            name: 'juejin',
        }
    }
    render() {
        console.log('render');
        return (
            <div>
                <p>{this.state.name}</p>
            </div>
        );
    }
    componentWillMount() {
        console.log('componentWillMount');
    }
    componentDidMount() {
        console.log('componentDidMount')
    }

• 打印结果：

状态更新

每个组件都有自己的this.state状态，通过setState更新this.state时默认就会进入刷新视图层的流程，并依次执行：componentWillUpdate、render、componentDidUpdate函数。

渲染与shouldComponentUpdate

并不是所有时候我们setState更新的状态内容需要渲染到页面上：

如上图，我们的age数据不需要在修改时刷新视图层，于是我们通过shouldComponentUpdate来控制是否需要刷新视图层（执行那三个生命周期函数），这样我们可以减少不必要的刷新，而刷新是会重新渲染dom。

子组件props更新

前面提及了状态this.state通过setState更新后会刷新，而props同样会因为父组件传值的改变而导致子组件的更新触发。流程和组件更新流程一致，并增加了一个新的生命周期函数。

组件销毁