React生命周期

一，前言

1.在class组件中，可以为组件添加生命周期函数，这样可以让我们在组件渲染的不同阶段，做一些操作。

2.注意在hook之前，函数组件没有生命周期的概念，不能设置生命周期钩子，只会在props更新时重新执行一遍

二，生命周期的三个阶段

1.创建阶段：

（1）constructor(props) ：

完成了数据的初始化，接受两个参数：props和context。注意，使用了这个方法后，必须调用super()传入props,否则this指向会出错。该方法只执行一次。

（2）componentWillMount() ：

组件将要挂载

（3）render()

渲染元素

（4）componentDidMount() ：

此时dom节点已经生成，组件挂载完毕

2.更新阶段

（1）componentWIllReceiveProps(nextProps) ：

针对子组件，当传入的props变化时执行。

（2）shouldComponentUpdate(nextProps, nextState) ;

react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新

（3）componentWillUpdate() ：

组件将要更新

（4）render() ：

渲染

（5）componentDidUpdate() ：

组件完成更新

3.销毁阶段

（1）componentWillUnmount() ：

组件将要销毁前

三，生命周期的执行顺序

1.子组件的state更新不会触发父组件更新阶段的生命周期函数

2.父组件的state发生变化，会触发所有子组件更新阶段的生命周期函数。即父组件重新渲染，所有子组件都需重新渲染。