React 进阶面试题, 在 React 16.x 中,props 改变后应该在生命周期的哪个阶段处理?
React 进阶面试题, 在 React 16.x 中,props 改变后应该在生命周期的哪个阶段处理?
QA
Step 1
Q:: 在 React 16.x 中，props 改变后应该在生命周期的哪个阶段处理？
A:: 在 React 16.x 中，props 改变后应该在 componentDidUpdate 或 getDerivedStateFromProps 生命周期方法中处理。componentDidUpdate 在组件更新后调用，可以用于根据新的 props 更新组件的状态或执行副作用。getDerivedStateFromProps 是一个静态方法，允许在 props 改变时更新组件的状态，是 React 16.x 新引入的，替代了过时的 componentWillReceiveProps。
Step 2
Q:: 什么是 getDerivedStateFromProps，它与 componentWillReceiveProps 有什么区别？
A:: getDerivedStateFromProps 是 React 16.x 中引入的一个静态生命周期方法，用于在 props 改变时同步更新 state。与 componentWillReceiveProps 不同，getDerivedStateFromProps 是静态方法，因此无法访问 this，只能返回一个对象来更新 state 或返回 null 不更新。它被设计为更安全、更可预测的替代方案。
Step 3
Q:: 在 React 中什么情况下使用 componentDidUpdate？
A:: componentDidUpdate 生命周期方法在组件更新完成后被调用。它通常用于处理需要基于更新后的 DOM 执行的副作用操作，比如网络请求、手动修改 DOM 元素等。需要注意的是，如果在此方法中更新状态，可能会导致无限循环，因此必须在更新状态之前进行适当的条件检查。
Step 4
Q:: React 16.x 中如何安全地管理副作用？
A:: 在 React 16.x 中，管理副作用的主要方法是使用 componentDidMount 和 componentDidUpdate。React 16.x 还引入了 useEffect 钩子（在函数组件中使用）来简化副作用的处理。useEffect 可以取代这些生命周期方法，并且通过依赖数组来控制副作用的执行条件，避免不必要的副作用运行。