理解 React 的生命周期钩子

React 的生命周期钩子是允许你管理组件生命周期不同阶段的钩子函数。生命周期钩子通常用于在组件挂载、更新和卸载期间执行特定代码。在 React 中，有两种主要类型生命周期钩子：旧版钩子和新版钩子。

旧版钩子在 React 16.3 之前使用，包括：

• componentWillMount：在组件挂载之前调用
• componentDidMount：在组件挂载之后调用
• componentWillReceiveProps：在组件收到新属性之前调用
• shouldComponentUpdate：在组件收到新属性或状态时调用，决定是否更新组件
• componentWillUpdate：在组件更新之前调用
• componentDidUpdate：在组件更新之后调用
• componentWillUnmount：在组件卸载之前调用

新版钩子在 React 16.3 之后引入，包括：

• useEffect：用于副作用，如数据获取和设置定时器
• useLayoutEffect：用于在 DOM 更新之前执行副作用
• useCallback：返回一个缓存的回调函数
• useMemo：返回一个缓存的值
• useReducer：管理状态，类似于 Redux
• useContext：访问父组件的上下文
• useRef：返回一个可变的引用，可以在组件中使用

在新版本中，React 新增了两个生命周期钩子：

• getDerivedStateFromProps：在组件首次挂载或接收到新属性时调用，用于更新组件状态。
• getSnapshotBeforeUpdate：在组件更新之前调用，用于在 DOM 更新之前获取快照。

getDerivedStateFromProps 用于在组件首次挂载或接收到新属性时更新组件状态。它接收两个参数：新的属性和当前的状态。它应该返回一个对象，其中包含要更新的状态。

getDerivedStateFromProps(nextProps, prevState) {
  // 如果nextProps.count与prevState.count不同，则更新状态
  if (nextProps.count !== prevState.count) {
    return {
      count: nextProps.count
    };
  }

  // 否则，返回null
  return null;
}

getSnapshotBeforeUpdate 用于在组件更新之前获取快照。它接收两个参数：当前的属性和当前的状态。它应该返回一个值，该值将在组件更新之后传递给 componentDidUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {
  // 获取DOM节点的滚动位置
  const scrollPosition = window.scrollY;

  // 返回滚动位置
  return scrollPosition;
}

旧版和新版钩子各有优势。旧版钩子更易于理解和使用，而新版钩子则更灵活和强大。在实际开发中，你可以根据自己的需求选择使用哪种钩子。

除了生命周期钩子之外，React 还提供了其他一些方法来管理组件的生命周期，包括：

• constructor：在组件实例化时调用
• render：在组件挂载或更新时调用，返回组件的 HTML 结构
• componentDidCatch：在组件中发生错误时调用

通过使用这些方法，你可以完全控制组件的生命周期，并编写出更健壮和可维护的 React 应用程序。