【前端面试】React生命周期函数以及V16新的Api引入_react16生命周期函数组件引入-优快云博客

本文链接：https://blog.youkuaiyun.com/MeiLuan_yahoho/article/details/86729497

本文介绍了React V16中生命周期函数的变化，包括初始化、挂载、更新和卸载阶段。在V16中，由于Fiber的引入，部分生命周期发生了调整，并新增了getDerivedStateFromProps和getSnapshotBeforeUpdate两个API。建议将componentWillMount中的逻辑移至componentDidMount，同时避免在可打断的Reconciliation阶段进行复杂操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期函数指在某一时刻调用的函数

1.初始化
这时候执行的其实就是constructor
在这里插入图片描述
2.mount挂载
componentWillMount – render – componentDidMount
组件即将被挂载到页面上–挂载–组件被挂载到页面上之后执行
componentWillMount， componentDidMount只会在第一次的时候执行
3.update更新
组件更新有两种情况
1.props发生变化
2.states发生变化

在这里插入图片描述
shouldComponentUpdate在组件被更新之前被执行
（返回true或false来决定组件是否需要被更新）

componentWillUpdate在组件更新之前，shouldComponentUpdate之后执行，只有shouldComponentUpdate返回的值是true它才会执行

componentDidlUpdate在组件更新之后执行

比较特殊的componetWillReceiveProps是在组件有接收props参数的情况下它才会执行
1.组件要从父组件接受参数
2.如果这个组件第一次存在于父组件中，不会执行
3.如果这个组件之前已经存在于父组件中，才会执行

4.unmount把组件从页面剔除
componentWillUnmount组件即将被移除的时候执行

关于reactv16生命周期的更新

更新说明
在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的 2 个 API 来解决问题。

在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的 state，那么调用栈可能会很长，调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主线程，带来不好的用户体验。Fiber 就是为了解决该问题而生。

Fiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的情况下去分段计算更新。

对于异步渲染，现在渲染有两个阶段：reconciliation 和 commit 。前者过程是可以打断的，后者不能暂停，会一直更新界面直到完成。

Reconciliation 阶段

componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

Commit 阶段

componentDidMount
componentDidUpdate
componentWillUnmount

因为 reconciliation 阶段是可以被打断的，所以 reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况，从而引起 Bug。所以对于 reconciliation 阶段调用的几个函数，除了shouldComponentUpdate 以外，其他都应该避免去使用，并且 V16 中也引入了新的 API 来解决这个问题。
getDerivedStateFromProps 用于替换 componentWillReceiveProps ，该函数会在初始化和 update 时被调用
getSnapshotBeforeUpdate 用于替换 componentWillUpdate ，该函数会在 update 后 DOM 更新前被调用，用于读取最新的 DOM 数据。
而原来现在componentWillMount里的函数写在componetDidMount比较好

V-16生命周期用法建议

class ExampleComponent extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数，所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件，多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}
  // 用于获得最新的 DOM 数据
  getSnapshotBeforeUpdate() {}
  // 组件即将销毁
  // 可以在此处移除订阅，定时器等等
  componentWillUnmount() {}
  // 组件销毁后调用
  componentDidUnMount() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 渲染组件函数
  render() {}
  // 以下函数不建议使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
}