React组件的生命周期及其使用场景

概览

文章内容选自极客时间ebay技术专家王沛的《React实战进阶》，本文的主题是介绍React的生命周期方法。

内容

React组件的生命周期方法

生命周期状态图：

image.png

render：计算组件状态
Pre-Commit：没有真正更新dom,读取dom内容
Commit：状态映射到dom,更新dom

getDerivedStateFromProps 最佳实践（16.3 引入）：
1、当state需要从props初始化时使用；
2、尽量不要使用：维护两者状态一致性会增加复杂度；
3、每次render都会调用；
4、典型场景：表单控件获取默认值 。

getSnapshotBeforeUpdate （16.3引入）：
1、在 页面render之前 调用，state已更新；
2、典型场景：获取 render 之前的DOM状态。