React源码分析 - 生命周期

最新推荐文章于 2023-01-18 00:13:28 发布

weixin_34409741

最新推荐文章于 2023-01-18 00:13:28 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a92e2d65188257a6426bad0

版权

React的生命周期函数是平时开发过程中经常会使用到的钩子函数，需要注意的地方在于：

生命周期函数被执行的时机。
这些方法中的setState的使用与否以及产生的效果如何。

生命周期函数在组件初次渲染、组件更新以及组件卸载的情况下会被调用，没什么特别的机制上的特殊的地方，需要注意的就是多层级的组件中的各个组件的生命周期函数的执行会遵循父组件至子组件递归的顺序，这和组件渲染、更新和卸载时的遍历顺序有关系，这里要注意的是在递归点之前被调用的函数是遵循父组件->子组件的顺序；在递归点后调用的函数是遵循子组件->父组件的顺序，具体可以看之前的《组件初次渲染》和《组件更新》两篇文章中的流程图，生命周期函数就是在这个过程中被执行的，有的生命周期函数会使用事务的方式，按顺序搜集到一个队列中，在事务结束的时候一并执行，这样一方面保证了执行的顺序另一方面也可以保证函数执行的统一的时机。

引用一张图来描述如下【图片来源：React 组件的生命周期】：

下面主要总结一些需要注意的点【大部分摘抄自参考资料】，原理不解释了，源码可以很明白的看懂：

componentWillMount中调用setState是不会触发re-render的，而是会进行state合并。componentWillMount中的this.state不是最新的，在render中才可以获得更新之后的this.state。
递归点是render方法，因此根据递归的特性，父组件的componentWillMount在其子组件的componentWillMount之前调用，而父组件的componentDidMount在其子组件的componentDidMount之后调用。
componentWillReceiveProps中调用setState是不会触发re-render的，而是进行state的合并。。
只有在render和componentDIdUpdate中才能获取到更新后的this.state。
和mount阶段一样在update阶段递归点是render，父子组件的 componentWillUpdate -> render-> componentDidUpdate 执行的顺序类似mount阶段，就不重复了。
shouldComponentUpdate和componentWillUpdate中无条件调用（没有额外的判断是否执行setState）setState，会造成循环调用，然后卡到崩溃。
在componentWillUnmount中调用setState不会触发re-render.......因为组件都要被卸载了....内部保存的状态都被null了巴拉巴拉，不过可以在这里去resolve一些和被卸载组件有关的异步的调用。
无状态组件就别说生命周期函数了~，本质上就是把return的ReactElement作为自定义组件的render一样的效果来处理，因此无状态组件非常简单和高效，只是为了渲染展示的。