learn/frontend/react/生命周期

React 生命周期是React组件在渲染过程中经历的不同阶段和状态。了解生命周期可以帮助开发者更好地管理和优化组件的性能。

生命周期方法

React组件的生命周期包括以下几个阶段：

挂载（Mounting）
- componentDidMount: 组件挂载到DOM后调用，通常用于获取DOM元素或发起网络请求。
更新（Updating）
- componentDidUpdate: 组件更新后调用，可以用来处理数据变化后的DOM操作。
- shouldComponentUpdate: 在组件更新前调用，可以用来控制组件是否更新。
卸载（Unmounting）
- componentWillUnmount: 组件卸载前调用，可以用来清理资源，如定时器或取消订阅。
挂载和更新（Mounting & Updating）
- getDerivedStateFromProps: 从属性获取派生状态，在组件挂载和更新时都会调用。
- getSnapshotBeforeUpdate: 在组件更新之前调用，可以用来获取之前的DOM状态。

示例代码

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  componentDidMount() {
    console.log('组件已挂载');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件已更新');
  }

  componentWillUnmount() {
    console.log('组件将卸载');
  }

  render() {
    return (
      <div>
        <p>计数器: {this.state.counter}</p>
        <button onClick={() => this.setState({ counter: this.state.counter + 1 })}>增加</button>
      </div>
    );
  }
}

扩展阅读

更多关于React生命周期的信息，请访问React官方文档。