类组件的生命周期react

类组件在React中的生命周期可以分为两个阶段：旧版生命周期（基于`componentWillMount`、`componentDidMount`等方法）和新版生命周期（基于`getDerivedStateFromProps`、`getSnapshotBeforeUpdate`、`componentDidMount`等更细粒度的钩子函数）。

**旧版生命周期**[^1]:
- `constructor(props)`：初始化组件，设置实例属性。
- `static getDerivedStateFromProps(props, state)`：如果props发生变化，React会调用这个静态方法来计算新的state值。
- `render()`：渲染组件的UI。
- `shouldComponentUpdate(nextProps, nextState)`：决定是否需要重新渲染，默认返回true。
- `getSnapshotBeforeUpdate(prevProps, prevState)`：在更新之前获取DOM快照。
- `componentDidMount()`：组件挂载完成后的回调，适合初始化与网络请求。

**新版生命周期**[^2]:
- `static getDerivedStateFromProps(props, state)`：替代`componentWillReceiveProps`，处理prop变化。
- `getSnapshotBeforeUpdate(prevProps, prevState)`：替代`componentWillUpdate`，在更新开始前获取DOM快照。
- `componentDidMount()`：保留原有功能，用于DOM操作和订阅事件。
- `componentDidUpdate(prevProps, prevState, snapshot)`：组件更新完成后执行，常用于DOM更新后的清理工作。

要演示这些生命周期方法，你可以创建一个简单的类组件并观察它们的执行顺序。例如：

class LifecycleExample extends React.Component {
  constructor(props) {
    super(props);
    // ...
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return { derivedState: props.newProp };
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true; // 或者根据条件返回false
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return {};
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  render() {
    console.log('render');
    return <div>My Component</div>;
  }
}

运行此组件时，你会看到上述生命周期方法的调用顺序。记得在实际项目中，旧版生命周期在React v16.8及以上版本已不再推荐使用，优先考虑使用新版生命周期钩子。