React Class组件生命周期及执行顺序

React Class组件生命周期是React组件在挂载、更新和卸载时所执行的方法集合。这个过程中，React会自动调用这些方法，让我们更好地管理组件的状态和行为。这篇攻略将深入讲解React Class组件生命周期及其执行顺序，以及如何正确使用它们来构建可扩展的React应用程序。

什么是React Class组件生命周期

React Class组件生命周期由一些方法构成，在组件生命周期中React会自动调用它们。这些方法被分为三个阶段：

1. Mounting（挂载）阶段
   React将一个组件实例挂载到DOM上，这个过程中，生命周期方法的执行顺序为：

2. constructor()

3. static getDerivedStateFromProps()
4. render()

5. componentDidMount()

6. Updating（更新）阶段
   当组件的props或state发生改变的时候，React会重新渲染组件。这个过程中，生命周期方法的执行顺序为：

7. static getDerivedStateFromProps()

8. shouldComponentUpdate()
9. render()
10. getSnapshotBeforeUpdate()

11. componentDidUpdate()

12. Unmounting（卸载）阶段
    当组件要被从DOM上卸载时，执行以下方法：

13. componentWillUnmount()

Mounting阶段

constructor()

constructor()是React Class组件中的一个特殊方法，在实例化组件时被调用。constructor()通常被用来初始化组件的状态。

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

static getDerivedStateFromProps()

getDerivedStateFromProps()是一个静态方法, 它会在props改变时被触发（即componentWillReceiveProps的替代方法）。它的返回值将被传递给组件的state。

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null;
  }
  ...
}

render()

render()方法是React Class组件中唯一必需的方法，它的作用是生成Virtual DOM。当setState()方法被调用时，render()方法将根据新的state重新渲染组件，并更新DOM。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.state.text}</p>
      </div>
    );
  }
  ...
}

componentDidMount()

componentDidMount()方法在组件挂载到DOM上后被调用。这个方法被广泛使用，它通常用来执行一些异步操作或从服务器请求数据。

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  ...
}

Updating阶段

static getDerivedStateFromProps()

getDerivedStateFromProps()在Mounting阶段中介绍过了，在Updating阶段中它依然可以使用。

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null;
  }
  ...
}

shouldComponentUpdate()

shouldComponentUpdate()用来控制组件是否需要重新渲染。它的返回值必须是true或false，如果返回false，组件将不会被重新渲染。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.id !== nextProps.id) {
      return true;
    }
    if (this.state.value !== nextState.value) {
      return true;
    }
    return false;
  }
  ...
}

render()

render()也在Mounting阶段中介绍过了，在Updating阶段中它依然不变。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} />
        <button onClick={this.handleClick}>Submit</button>
      </div>
    );
  }
  ...
}

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()方法在组件更新完成后被调用。它的返回值将被传递给componentDidUpdate()方法。

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  ...
}

componentDidUpdate()

componentDidUpdate()方法在组件更新完成后被调用。它通常用来执行一些DOM操作或者更新组件的状态。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  ...
}

Unmounting阶段

componentWillUnmount()

componentWillUnmount()方法在组件被卸载时被调用。它通常用来清除组件的定时器或取消订阅事件等。

class MyComponent extends React.Component {
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  ...
}

总结

本文详细介绍了React Class组件生命周期及其执行顺序。在构建React应用程序时，理解生命周期是非常重要的。生命周期可以让我们控制组件的状态和行为，从而让我们更好地管理React代码。