react生命周期

React组件的生命周期可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。每个阶段都有相应的生命周期钩子函数，可以在不同的阶段进行操作。

1. 挂载阶段：

• constructor()：组件实例化时调用，用于初始化state和绑定方法。
• static getDerivedStateFromProps()：在调用render方法之前调用，用于根据props的变化更新state。
• render()：根据props和state生成虚拟DOM。
• componentDidMount()：在组件挂载后调用，可以进行异步请求数据、订阅事件等操作。

例子：在组件挂载后通过API请求数据：

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  render() {
    // ...
  }
}

2. 更新阶段：

• static getDerivedStateFromProps()：在挂载阶段和更新阶段都会调用，用于根据props的变化更新state。
• shouldComponentUpdate()：在更新阶段开始前调用，用于判断是否需要重新渲染组件。
• render()：根据新的props和state生成虚拟DOM。
• getSnapshotBeforeUpdate()：在DOM更新之前调用，用于获取当前的DOM状态。
• componentDidUpdate()：在更新阶段结束后调用，可以进行DOM操作或其他副作用操作。

例子：在props变化时更新组件：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.data !== this.props.data;
  }
  render() {
    // ...
  }
  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) {
      // 更新操作
    }
  }
}

3. 卸载阶段：

• componentWillUnmount()：在组件卸载前调用，可以进行清理操作，如取消定时器、取消订阅等。

例子：在组件卸载前清理定时器：

class MyComponent extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      // ...
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    // ...
  }
}

除了上述主要的生命周期钩子函数，还有一些其他的生命周期钩子函数，如：

• static getDerivedStateFromError()：在子组件抛出错误时调用，用于渲染备用UI。
• componentDidCatch()：在子组件抛出错误后调用，可记录错误信息。

这些生命周期钩子函数可以帮助我们在组件不同的阶段执行不同的操作，实现更好的组件交互和性能优化。