react 组件的生命周期

挂载（Mounting）阶段

• constructor()
  • 这是组件的构造函数，在组件实例被创建时首先调用。它主要用于初始化组件的状态（this.state）和绑定事件处理函数。例如：

    class MyComponent extends React.Component {
             
    constructor(props) {
             
    super(props);
    this.state = {
             
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
    }
    // 其他方法
    }
    

    在这里，通过super(props)调用父类（React.Component）的构造函数来传递props，然后初始化count状态为0，并绑定handleClick方法。
• componentWillMount()（已废弃）
  • 在组件挂载之前调用，在这个方法中可以进行一些状态的设置或者其他准备工作。不过，这个方法在React 17版本中已经被标记为废弃，因为它可能会导致一些难以预测的副作用。
• render()
  • 这是React组件中最重要的方法之一。它必须返回一个React元素，这个元素可以是原生的DOM元素（如<div>、<p>等），也可以是自定义的React组件。例如：

    render() {
             
    return (
    <div>
      <p>Count: {
             this.state.count}</p>
      <button onClick={
             this.handleClick}>Increment</button>
    </div>
    );
    }
    

    这里返回了一个包含段落和按钮的div元素，段落显示count状态的值，按钮的点击事件绑定到handleClick方法。
• componentDidMount()
  • 在组件挂载（插入DOM树）完成后立即调用。这个阶段通常用于执行一些需要访问DOM节点的操作，比如发起网络请求、添加事件监听器等。例如：

    componentDidMount() {
             
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => this.setState({
              data }));
    }
    

    这段代码在组件挂载后发起一个网络请求，获取数据后更新组件的状态。

更新（Updating）阶段

• componentWillReceiveProps(nextProps)（已废弃）
  • 在组件接收到新的props之前调用。这个方法用于比较新的props和旧的props，并根据变化进行相应的状态更新。不过，这个方法在React 17版本中也已经被标记为废弃。
• shouldComponentUpdate(nextProps, nextState)
  • 在组件接收到新的props或者状态（state）更新之前调用。这个方法返回一个布尔值，用于决定组件是否需要重新渲染。如果返回false，则组件不会重新渲染，这可以用于性能优化。例如：

    shouldComponentUpdate(nextProps, nextState) {
             
    return nextState.count!== this.state.count;
    }
    

    这里比较新的count状态和旧的count状态，如果不相等，则返回true，允许组件重新渲染。
• componentWillUpdate(nextProps, nextState)（已废弃）
  • 在组件确定要更新之后，在render方法之前调用。这个方法主要用于在更新前进行一些准备工作，但是它也可能会导致一些副作用，并且在React 17版本中被标记为废弃。
• render()
  • 与挂载阶段的render方法功能相同，用于返回一个React元素来更新DOM。每次组件状态或者props发生变化并且shouldComponentUpdate返回true时，这个方法都会被调用。
• componentDidUpdate(prevProps, prevState)
  • 在组件更新完成后调用。这个方法可以用于在更新后执行一些操作，比如根据更新后的状态操作DOM或者发起新的网络请求。例如：

    componentDidUpdate(prevProps, prevState) {
             
    if (this.state.count > prevState.count) {
             
    console.log('Count has increased.');
    }
    }
    

    这里比较更新后的count状态和之前的count状态，如果增加了，则在控制台输出相应的信息。

卸载（Unmounting）阶段

• componentWillUnmount()
  • 在组件即将从DOM中卸载时调用。这个方法用于清理组件在挂载和更新阶段添加的一些资源，比如清除定时器、取消网络请求、移除事件监听器等。例如：

    componentWillUnmount() {
             
    clearInterval(this.timer);
    }
    

    如果在组件中设置了一个定时器this.timer，在组件卸载时需要通过clearInterval来清除这个定时器，以防止内存泄漏等问题。