React旧版本与React16中生命周期的区别

前端

2024-01-21 16:29:21

React 组件生命周期：全面指南

什么是组件生命周期？

在 React 中，组件的生命周期是指组件从创建到卸载的不同阶段。这些阶段定义了组件在每个阶段的行为，并允许开发人员在组件的不同生命周期事件中执行特定的任务。

React 组件生命周期方法

React 中的组件生命周期方法是预定义的方法，会在组件的生命周期中特定时刻被调用。这些方法使开发人员能够在组件的不同阶段执行自定义代码，从而实现组件的创建、更新、卸载等行为。

React 旧版本（15 及更早版本）生命周期方法

在 React 15 及更早版本中，组件生命周期包括以下方法：

componentWillMount： 在组件挂载到 DOM 之前调用。
componentDidMount： 在组件挂载到 DOM 之后调用。
componentWillReceiveProps： 在组件收到新属性之前调用。
componentWillUpdate： 在组件更新之前调用。
componentDidUpdate： 在组件更新之后调用。
componentWillUnmount： 在组件从 DOM 中卸载之前调用。

React 16 及更高版本生命周期方法

在 React 16 中，生命周期方法发生了重大变化，弃用了以下三个方法：

componentWillMount
componentWillReceiveProps
componentWillUpdate

新增了一个生命周期方法：

getDerivedStateFromProps

此外，componentDidMount 和 componentDidUpdate 两个方法的参数也发生了变化。在 React 16 中，这两个方法的参数不再是 prevProps 和 prevState ，而是 prevProps 和 snapshot 。

React 组件生命周期方法的用法

不同的生命周期方法用于在组件生命周期的特定时刻执行特定任务。以下是对这些方法的更详细说明：

componentWillMount： 用于在组件挂载到 DOM 之前初始化组件状态或执行异步操作。
componentDidMount： 用于在组件挂载到 DOM 之后执行操作，例如获取数据或设置事件监听器。
componentWillReceiveProps： 用于在组件收到新属性之前更新组件状态或执行其他操作。
componentWillUpdate： 用于在组件更新之前更新组件状态或执行其他操作。
componentDidUpdate： 用于在组件更新之后执行操作，例如获取数据或设置事件监听器。
componentWillUnmount： 用于在组件从 DOM 中卸载之前释放资源或执行清理操作。
getDerivedStateFromProps： 用于在组件首次挂载和每次更新时更新组件状态。

代码示例

以下代码示例演示了 React 组件生命周期方法的用法：

class MyComponent extends React.Component {
  componentWillMount() {
    console.log('组件即将挂载');
  }

  componentDidMount() {
    console.log('组件已挂载');
  }

  componentWillReceiveProps(nextProps) {
    console.log('组件将接收新的属性', nextProps);
  }

  componentWillUpdate(nextProps, nextState) {
    console.log('组件将更新', nextProps, nextState);
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件已更新', prevProps, prevState);
  }

  componentWillUnmount() {
    console.log('组件即将卸载');
  }

  render() {
    return (
      <div>
        <h1>我的组件</h1>
      </div>
    );
  }
}