目录
1. 旧生命周期
1.1 初始化和挂载阶段
1.2 运行阶段
1.2.1 父组件更新时
1.2.2 自身状态state改变
1.3 销毁阶段
2. 新生命周期更新
2.1 销毁阶段不变
2.2 getDerviedStateFromProps
2.3 getSnapshotBeforeUpdate
2.4 更新周期图
1. 旧生命周期
1.1 初始化和挂载阶段
设置默认属性。
constructor构造器,super执行,设置初始化的state。
componentWillMount第一次运行。
render第一次渲染。
componentDidMount执行,且只在初始化执行一次。
1.2 运行阶段
1.2.1 父组件更新时
componentWillReceiveProps执行,参数有父组件更新前后的props。
shouldComponentUpdate执行,可以在内部设置是否继续执行渲染,可以在这里阻断组件渲染更新。
componentWillUpdate执行,如果shouldComponentUpdate没有阻断就开始做更新准备。
render执行,使用新的状态渲染组件。
componentDidUpdate执行,更新组件渲染完毕之后执行。
1.2.2 自身状态state改变
如果是自身状态改变,那么不会执行componentWillReceiveProps。
因为不是由外部props导致的更新,其他就与上方后面四步一致。
componentWillReceiveProps执行,参数有父组件更新前后的props。
shouldComponentUpdate执行,可以在内部设置是否继续执行渲染,可以在这里阻断组件渲染更新。
componentWillUpdate执行,如果shouldComponentUpdate没有阻断就开始做更新准备。
render执行,使用新的状态渲染组件。
componentDidUpdate执行,更新组件渲染完毕之后执行。
1.3 销毁阶段
只执行一个。
componentWillUnmount,常用于销毁那些不会自动跟着组件一起销毁的计时器等。
2. 新生命周期更新
2.1 销毁阶段不变
仍然是一个componentWillUnmount。
2.2 getDerviedStateFromProps
从旧的生命周期可以看到在render执行前的钩子有
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
让我们想想在render之前执行的钩子能有什么作用?
shouldComponentUpdate控制是否更新在很多场合有用,比如我们不希望没有受到父组件props影响的组件由于父组件更新而被迫更新。所以保留
根据props决定state?这个功能我们是需要的,就是原来componentWillReceiveProps做的事。
剩下的我们原来是用来调用异步ajax请求数据?显然有问题,因为可能会导致异步ajax无故多次调用,更何况在初始化第一次render之后的有且只执行一次的componentDidMount中调用异步请求明显更加合理。
由此可见我们只需要两个钩子就够了,除了shouldComponentUpdate之外剩下三个钩子被静态方法getDerviedStateFromProps代替。
2.3 getSnapshotBeforeUpdate
原来只是简单的用render前后的componentWillUpdate和componentDidUpdate来判断更新前后,现在我们知道componentWillUpdate被删除了(原因在上文)。
所以不应该简单用render来表示更新这个过程,所以新的周期中render和react更新dom区分开了。
并且在它们中间加了一个getSnapshotBeforeUpdate,可以判断更新前的dom状态。
2.4 更新周期图
在版本16.3中就更新了上述内容,图大致如下
后来发现了一些问题,认为不应该有更新过程跳过getDerviedStateFromProps,因此在16.4+修改了这点