React中类式组件的（新、旧）生命周期

在React中，类式组件的生命周期可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。

新的生命周期（推荐使用）:

1. 挂载阶段:

   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. 更新阶段:

   • getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. 卸载阶段:

   • componentWillUnmount

旧的生命周期（已废弃）:

1. 挂载阶段:

   • constructor
   • componentWillMount (注意，在16.3之后不再推荐使用)
   • render
   • componentDidMount

2. 更新阶段:

   • componentWillReceiveProps
   • shouldComponentUpdate
   • componentWillUpdate (注意，在16.3之后不再推荐使用)
   • render
   • componentDidUpdate

3. 卸载阶段:

   • componentWillUnmount

示例代码：

class MyComponent extends React.Component {
  // 构造函数
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = { counter: 0 };
    // 绑定方法
    this.incrementCounter = this.incrementCounter.bind(this);
  }
 
  // 在组件挂载后立即调用
  componentDidMount() {
    console.log('组件已挂载');
  }
 
  // 在组件即将卸载时调用
  componentWillUnmount() {
    console.log('组件即将卸载');
  }
 
  // 处理增加计数器的逻辑
  incrementCounter() {
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  }
 
  // 渲染组件
  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

请注意，在新的React生命周期中，已经移除了几个过时的生命周期方法，如componentWillMount、componentWillUpdate和componentWillReceiveProps，以优化错误处理和性能。推荐使用新的生命周期方法。