React组件的生命周期函数

React组件的生命周期可以被分为三个阶段：装载（Mount）、更新（Update）和卸载（Unmount）。以下是React组件生命周期中的关键函数：

1. constructor(): 实例化组件时调用一次。
2. componentDidMount(): 组件挂载到DOM后调用，只会调用一次。
3. componentDidUpdate(): 组件更新后会调用，首次渲染不会调用。
4. componentWillUnmount(): 组件即将被卸载时调用，清理工作，如定时器和事件监听器。
5. render(): 渲染虚拟DOM，是类组件中唯一必需的生命周期函数。

示例代码：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = { count: 0 };
  }
 
  componentDidMount() {
    // 组件挂载后执行的操作，例如：发起网络请求或者订阅事件
  }
 
  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行的操作，例如：状态更新导致的UI更新
  }
 
  componentWillUnmount() {
    // 组件卸载前执行的操作，例如：清除定时器或取消订阅
  }
 
  render() {
    // 渲染组件，返回虚拟DOM
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

在React Hooks出现后，函数组件可以使用useEffect钩子来模拟componentDidMount和componentDidUpdate的功能，以及useEffect的返回值来模拟componentWillUnmount的功能。