React的生命周期

React组件的生命周期可以被分为三个主要阶段：初始化（Mount）、更新（Update）和卸载（Unmount）。以下是每个阶段的关键方法以及示例代码：

1. 初始化（Mount）：当组件实例被创建并插入DOM中时

   • constructor(): 初始化React组件的状态。
   • render(): 根据组件状态渲染虚拟DOM。
   • componentDidMount(): 组件已成功渲染到DOM中，可以进行DOM相关的操作，例如设置计时器，或发送请求等。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
 
  componentDidMount() {
    // 初始化DOM相关的操作
  }
 
  render() {
    return <div>{this.state.value}</div>;
  }
}

2. 更新（Update）：当组件的属性或状态发生变化时

   • render(): 根据新的属性/状态渲染虚拟DOM。
   • componentDidUpdate(): 组件更新完成后会调用此方法，可以进行DOM相关的操作。

class MyComponent extends React.Component {
  // ...
 
  componentDidUpdate(prevProps, prevState) {
    // 执行DOM相关的更新操作
  }
 
  // ...
}

3. 卸载（Unmount）：当组件从DOM中移除时

   • componentWillUnmount(): 组件即将被移除，可以在这里清理计时器，取消网络请求等。

class MyComponent extends React.Component {
  // ...
 
  componentWillUnmount() {
    // 清理工作，例如清除计时器
  }
 
  // ...
}

以上方法是React类组件的生命周期方法，函数组件没有类组件的所有生命周期方法，它们使用React Hooks来处理组件的生命周期。