React 生命周期精讲

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

1. 初始化阶段：

   • constructor(): 在组件被创建时调用一次，用于初始化state或者绑定方法到this。
   • static getDerivedStateFromProps(): 当组件的props或state更新时调用，返回一个对象用于更新state。
   • render(): 根据组件的当前state或props渲染虚拟DOM。
   • componentDidMount(): 在组件被挂载到DOM后调用，可以进行API请求或者DOM操作。

2. 更新阶段：

   • static getDerivedStateFromProps(): 如上所述，在组件接收新的props时调用。
   • shouldComponentUpdate(): 在更新前调用，返回false可以阻止更新，提供性能优化。
   • render(): 如上所述，根据新的state或props渲染虚拟DOM。
   • getSnapshotBeforeUpdate(): 在DOM更新前调用，可以返回一个值，作为componentDidUpdate()的第三个参数。
   • componentDidUpdate(): 在组件更新后调用，可以包含DOM操作。

3. 卸载阶段：

   • componentWillUnmount(): 在组件被卸载前调用，可以清除定时器，取消网络请求或者清理任何此组件相关的资源。

下面是一个简单的React类组件示例，展示了这些生命周期方法：

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  static getDerivedStateFromProps(props, state) {
    // 根据props更新state
  }
 
  componentDidMount() {
    // 组件挂载后的操作
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    // 条件渲染，性能优化
    return true;
  }
 
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
 
  componentDidUpdate(prevProps, prevState, snapshot) {
    // 组件更新后的操作
  }
 
  componentWillUnmount() {
    // 组件卸载前的操作
  }
}

这个例子中的组件有一个状态变量count，通过按钮点击来增加。它展示了如何在组件的不同生命周期中处理状态更新和DOM操作。