面试题：React 生命周期方法之组件更新阶段

Question

在 React 组件更新阶段，有哪些重要的生命周期方法？请分别描述它们的作用以及在什么场景下会被调用。

Answer 1

1. shouldComponentUpdate(nextProps, nextState)

• 作用：该方法用于判断组件是否需要更新。返回 true 表示组件需要更新，返回 false 则阻止组件更新。它可以帮助我们优化组件性能，避免不必要的重新渲染。
• 调用场景：当组件的 props 或 state 发生变化时，React 会在渲染新的 Virtual DOM 之前调用这个方法。

2. componentDidUpdate(prevProps, prevState, snapshot)

• 作用：在组件更新后会被调用。可以在此处执行一些需要在更新后立即执行的操作，比如操作 DOM、发起网络请求等。如果 shouldComponentUpdate 返回 false，这个方法不会被调用。
• 调用场景：组件更新后，也就是 Virtual DOM 重新渲染并更新真实 DOM 之后调用。prevProps 和 prevState 分别是更新前的 props 和 state，snapshot 是 getSnapshotBeforeUpdate 返回的值（如果有）。

3. getSnapshotBeforeUpdate(prevProps, prevState)

• 作用：在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate 中的 snapshot 参数。
• 调用场景：在 render 之后，componentDidUpdate 之前调用，且仅在有更新发生时调用。主要用于在 DOM 更新之前获取 DOM 的相关信息，以便在 componentDidUpdate 中使用。