浅入 React 生命周期相关(二)更新生命周期

react更新阶段生命周期

更新阶段分为两部分 父组件执行 render 或者调用 this.setState

componentWillReceiveProps

大部分网上教程为外部 props 发生改变才触发 componentWillReceiveProps,其实不是,当父组件进入 render 时,无论子组件的 props 发没发生改变,都会执行该生命周期函数。
函数参数有一个,为 nextProps,为将要新的 props
值得注意的是,在整个更新阶段的生命周期函数,只有在此函数内可以调用 this.setState 方法,当然其他也可以调用,但是会造成死循环

shouldComponentUpdate

该函数需要返回值,如没定义则默认返回 true。当返回值为 true 时,进入 componentWillIpdate ,如为 false ,则什么都不发生。所以说这是一个可以进行 React 性能优化的地方。函数参数有两个 nextPropsnextState。我们需用做的就是在 this.propsthis.statenextStatenextProps之间进行对比,来解决重复渲染的目的。

componentWillUpdate

如果 shouldComponentUpdate 返回值为 true 的话,生命周期会进入该函数中。在这个函数中我们可以根据实际情况做一些事情,但是不能调用 this.setState

render

在更新阶段的 render 来讲一讲 调和 过程。 render 返回的 JSX 标签会保存在内存中,react 会通过 diff 算法来计算出最小化改动完成差异的更新。diff 是逐层递归比较,首先比较类型是否一样。如果发现 <div><span> 的差别的话,react 会选择直接放弃之前的 dom 元素, 重新渲染。所以说即使是更新阶段的调和过程,也会触发组件的挂载、卸载阶段。

componentDidUpdate

在这个时候已经更新完 dom 结构,可以重新使用 dom 操作。

总结

总体来说更新的生命周期要做的最重要的事情就是性能优化,减少重复渲染次数。
在这个方面已经有很多成熟的解决方法了,在我的博客中也会介绍如何定制更新阶段的生命周期函数。
在使用上,最最重要的一点就是不要在除了 componentWillReceiveProps 之外的其他更新阶段生命周期函数内调用 this.setState

相关链接:

浅入 React 生命周期相关(一)挂载生命周期

猜你喜欢

转载自blog.csdn.net/sunlei19951007/article/details/80267710