React组件的生命周期详解

React组件的生命周期可以分为三个阶段：

1. 挂载阶段（Mounting）
2. 更新阶段（Updating）
3. 卸载阶段（Unmounting）

在接下来的讲解中，我们将深入探讨每个阶段的具体生命周期函数及其作用。同时，我们也会为每个函数提供示例说明。

挂载阶段（Mounting）

在组件挂载之前和之后，React会依次调用以下生命周期函数：

constructor(props)

constructor是生命周期的第一个函数，这个函数是ES6类中的构造函数。此函数在组件创建时被调用，并将props通过参数传入构造函数。

示例：创建一个类，输出props到控制台

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    console.log("props: ", props);
  }
  render() {
    return <div>Hello React!</div>;
  }
}

static getDerivedStateFromProps(props, state)

这个函数在组件挂载之前、更新之前，以及父组件传递的props发生变化时被调用。它接收props和state两个参数，用于控制组件的状态。返回一个对象来更新state。

示例：通过getDerivedStateFromProps更新state

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      count: props.initialCount
    };
  }
  static getDerivedStateFromProps(props, state) {
    return {
      count: props.initialCount
    };
  }
  render() {
    return <div>Count: {this.state.count }</div>;
  }
}

render()

render函数是React组件的核心函数，用于返回组件的渲染结果。render应该是一个纯函数，它不应该产生副作用，也不应该调用组件的其他函数。

示例：返回一段HTML代码

class MyComponent extends React.Component {
  render() {
    return <div>Hello React!</div>;
  }
}

componentDidMount()

componentDidMount函数在组件挂载后立即调用。一般情况下，该函数用于进行网络请求、初始化第三方库等操作。

示例：在组件挂载后调用setInterval

class MyComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

更新阶段（Updating）

在组件更新之前和之后，React会依次调用以下生命周期函数：

static getDerivedStateFromProps(props, state)

同挂载阶段中的getDerivedStateFromProps方法，只是在组件更新时被调用。

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate函数用于控制组件是否进行更新。如果该函数返回false，则不会调用组件的render函数，也不会触发后续的更新函数；如果该函数返回true，则继续更新组件。默认情况下，该函数返回true。

示例：通过shouldComponentUpdate控制组件更新

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      count: 0
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.count === nextState.count) {
      return false;
    }
    return true;
  }
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <div>Count: {this.state.count}</div>
      </div>
    );
  }
}

render()

同挂载阶段中的render方法。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate函数在组件更新之前调用。它接收两个参数：prevProps和prevState，用于获取更新前的props和state。该函数的返回值将作为第三个参数传递给componentDidUpdate函数。

示例：通过getSnapshotBeforeUpdate获取滚动条位置

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.users.length < this.props.users.length) {
      const container = this.myRef.current;
      return container.scrollHeight - container.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const container = this.myRef.current;
      container.scrollTop = container.scrollHeight - snapshot;
    }
  }
  render() {
    return (
      <div ref={this.myRef} style={{ height: "100px", overflow: "auto" }}>
        {this.props.users.map((user) => (
          <div>{user}</div>
        ))}
      </div>
    );
  }
}

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate函数在组件更新后调用。它接收三个参数：prevProps、prevState和snapshot。用于处理更新后的操作：例如重新请求数据、改变各种状态等。

示例：在组件更新后触发弹窗

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.isVisible !== this.props.isVisible && !this.props.isVisible) {
      alert('Modal hidden!') // 弹窗提示
    }
  }
  render() {
    return (
      <div>{this.props.isVisible && <div className="modal">Modal content goes here.</div>}</div>
    );
  }
}

卸载阶段（Unmounting）

在组件卸载之前，React只会调用一个生命周期函数：

componentWillUnmount()

componentWillUnmount函数在组件卸载之前调用。一般情况下，该函数用于释放组件占用的资源、停止定时器等。

示例：在组件卸载时停止计时器

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.timerID = null;
    this.state = {
      count: 0
    };
  }
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <div>
        Count: {this.state.count}
      </div>
    );
  }
}

以上就是React组件的完整生命周期，其中的每个生命周期函数都有着不同的作用。在实际编码过程中，我们应该根据实际需求，选择合适的生命周期函数来处理组件相关的操作。