生命周期

在 React 16 中，组件的生命周期方法是理解组件如何挂载、更新和卸载的关键。以下是 React 16 中组件生命周期的主要阶段及其对应的方法：

挂载阶段 (Mounting)

这些方法在组件实例被创建并插入 DOM 时调用。

• constructor(props):

  • 构造函数是初始化 state 和绑定事件处理程序的地方。

• :

  • 组件挂载之前调用，可以在这里进行一些初始化操作，如设置默认的 props 或 state。

• static getDerivedStateFromProps(props, state):

  • 这是一个静态方法，在组件挂载之前以及每次接收新 props 之前调用。它用于根据 props 更新 state（注意：谨慎使用，因为这可能会导致性能问题）。

• render():

  • 必须实现的方法，返回 JSX 描述的 UI。这个方法是纯函数，不应该有副作用。

• componentDidMount():

  • 组件完成首次渲染后立即调用。这是发起网络请求、订阅或手动操作 DOM 的好时机。

更新阶段 (Updating)

这些方法在组件接收到新的 props 或 state 变化时调用。

• static getDerivedStateFromProps(props, state):

  • 在接收新的 props 时也会调用，用于更新 state（同样需谨慎使用）。

• :

  • 组件接收到新的 props 时调用，可以在这里进行一些操作，如更新 state。

• shouldComponentUpdate(nextProps, nextState):

  • 返回一个布尔值，决定组件是否应该重新渲染。可以通过比较当前和下一个 props 或 state 来优化性能。

• :

  • 组件接收到新的 props 或 state 时调用，可以在这里进行一些操作，如更新 state。

• render():

  • 如果 shouldComponentUpdate 返回 true，则会再次调用 render 方法。

• getSnapshotBeforeUpdate(prevProps, prevState):

  • 在最近一次渲染输出（即最新的 DOM 状态）提交到浏览器之前立即调用。可以捕获 DOM 信息（例如滚动位置），并在后续的 componentDidUpdate 中使用。

• componentDidUpdate(prevProps, prevState, snapshot):

  • 组件更新完成后调用。通常用来执行 DOM 操作或者发送网络请求等。

卸载阶段 (Unmounting)

当组件从 DOM 中移除时调用。

• componentWillUnmount():

  • 组件即将被销毁时调用。在这里清理定时器、取消网络请求或清除订阅等。

错误处理

React 16 引入了错误边界的概念，允许某些组件捕获其子树中的 JavaScript 错误。

• static getDerivedStateFromError(error):

  • 当后代组件抛出错误时调用，可用于设置状态以显示降级 UI。

• componentDidCatch(error, info):

  • 错误被捕获后调用，可以用于记录错误信息。

注意事项

• componentWillMount, componentWillReceiveProps, 和 componentWillUpdate 这些生命周期方法在 React 16.3 中被标记为不安全，并且在 React 17 中已被废弃。官方建议使用其他生命周期方法或 Hooks API（如 useEffect）来代替它们。

了解这些生命周期方法有助于更好地管理组件的行为和性能。随着 React 的发展，引入了 Hook（自 React 16.8 开始），使得函数组件也可以拥有状态和其他特性，从而简化了生命周期管理。如果你正在使用 React 16 并考虑未来的兼容性和最佳实践，请开始熟悉 Hooks。