React

React 16.X 中 props 改变后在哪个⽣命周期中处理？

参考答案：

在 React 16.x 中，当 props 改变时，你可以在以下生命周期方法中进行处理：

componentDidUpdate(prevProps, prevState)：这个生命周期方法会在组件更新后立即被调用。当 props 或 state 发生变化时，你可以在这个方法中比较 prevProps 和 this.props，以及 prevState 和 this.state，以了解哪些属性或状态发生了变化，并据此执行相应的逻辑。

componentDidUpdate(prevProps) {
  if (this.props.someProp !== prevProps.someProp) {
    // 处理 props 变化的逻辑
  }
}

需要注意的是，componentDidUpdate 只能用于处理 props 或 state 变化后的逻辑，而不是用于阻止组件的更新。如果你需要根据 props 的变化来决定是否更新组件，那么应该使用 shouldComponentUpdate 或 React.memo。

getSnapshotBeforeUpdate(prevProps, prevState)：这个生命周期方法会在渲染新的 props 或 state 之后，但在浏览器绘制之前被调用。它返回一个值，该值将作为第三个参数传递给 componentDidUpdate。通常，这个方法用于在 DOM 更改之前从 DOM 捕获一些信息（例如，滚动位置）。

getSnapshotBeforeUpdate(prevProps, prevState) {
  // 捕获信息，例如滚动位置
  return someValue;
}

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.someProp !== prevProps.someProp) {
    // 使用 snapshot 中的信息进行处理
  }
}

但请注意，getSnapshotBeforeUpdate 和 componentDidUpdate 并不总是成对出现。如果你不需要在 DOM 更改之前捕获信息，那么可能只需要使用 componentDidUpdate。

总的来说，当你在 React 16.x 中需要处理 props 改变后的逻辑时，通常会在 componentDidUpdate 中进行。如果需要在 DOM 更改之前捕获一些信息，那么可以考虑使用 getSnapshotBeforeUpdate。