上节课我们通过案例介绍了getSnapshotBeforeUpdate钩子的使用场景，至此我们是正式结束了react生命周期的学习。这节课我们对新版生命周期来做一个简单地阶段性总结。

回顾

在进行总结之前我们对上节课的知识点来做一个简单的回顾

  • scrollTop属性可以使页面向上滚动
  • scrollTop属性没有自动累加功能
  • scrollHeight可以获取当前容器的内容区域的高度

以上便是上节课我们比较重要的几点，但是全程好像没有跟getSnapshotBeforeUpdate钩子有什么关系，因为上节课的核心其实就是已上几点，而这个钩子其实并没有什么重要的部分。

初始化阶段

有ReactDOM.render触发初次渲染依次调用以下钩子

  1. constructor 构造器方法
  2. getDerivedStateFromProps钩子(几乎用不着)
  3. render挂载组件
  4. componentDidMount完成挂载马上调用

更新阶段

由setState或者父组件的重新render以及forceUpdate触发，依次会调用

  1. getDerivedStateFromProps钩子(几乎用不着)
  2. shouldComponentUpdate，是否允许更新，允许则往下进行，不允许则终止流程，forceUpdate不经过次环节
  3. render
  4. getSnapshotBeforeUpdate在更新前获取快照，应用场景也很少。
  5. componentDidUpdate完成更新后立即调用

卸载阶段

由ReactDOM.unmountComponentAtNode触发，调用componentWillUnmount钩子来做一些收尾工作

以上便是新版生命周期的内容

常用钩子

  • componentDidMount
  • componentWillUnmount
  • render

以上钩子并无任何改变，和旧版生命周期一模一样。

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/summary_lifecycle_new/