React 组件的常用生命周期函数汇总

下面我会详细讲解 React 组件的常用生命周期函数。

什么是组件的生命周期函数？

React 组件的生命周期函数指的是在组件创建、运行和销毁这一整个过程中，React 所提供的一系列函数。这些函数会在组件特定的时间点被调用，我们可以在这些函数中执行一些自己的代码。

在 React16 之前，React 组件的生命周期函数主要有三类：Mounting（挂载）、Updating（更新）和Unmounting（卸载）。

在 React16 之后，出现了一些全新的生命周期函数，比如 getDerivedStateFromProps、getSnapshotBeforeUpdate 等，以适应更多的场景需求。

下面我们来详细了解一下这些生命周期函数。

Mounting

Mounting 即组件挂载的生命周期，也就是组件被创建并插入 DOM 中的过程。常用的生命周期函数有：

constructor

constructor 函数是 React 组件中唯一一个不需要调用 super(props) 的函数，也是我们组件中最先被调用的函数。一般我们可以在 constructor 中初始化组件的状态（state）或者绑定事件处理方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // 绑定事件处理方法
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 修改 count 的值
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

componentWillMount

在组件第一次初始化时，componentWillMount 被调用。这个函数是在组件挂载 DOM 前被调用，可以在这里执行一些异步请求等操作。然而，在 React16 之后，它被标记为废弃，不推荐使用。

componentDidMount

在组件挂载后，componentDidMount 被调用，此时我们可以执行一些初始化的任务，例如从 API 中获取数据，并将数据存储在组件的 state 中。在这个函数中，我们也可以执行一些 DOM 操作。

示例

下面是一段代码，在该组件插入 DOM 即第一次被渲染时，调用 componentDidMount 完成了一个简单的动画效果：

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

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  componentDidMount() {
    const element = this.refs['mydiv'];
    const width = element.offsetWidth;
    element.style.width = '0px';
    element.style.opacity = '0';
    setTimeout(() => {
      element.style.width = `${width}px`;
      element.style.opacity = '1';
    }, 3000);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点击</button>
        <div ref="mydiv">{this.state.count}</div>
      </div>
    );
  }
}

在 componentDidMount 函数里获取到 div 元素的宽度，然后设置其 opacity 和宽度为 0，再通过 setTimeout 完成动画效果。

Updating

Updating 即组件数据更新的生命周期。组件数据更新有两种情况，一种是 props 的数据更新，一种是 state 的数据更新。

常用的生命周期函数有：

componentWillReceiveProps

当使用组件的时候，会改变组件的 props 值，当新的 props 值传入组件后，就会触发 componentWillReceiveProps 函数，这个时候我们可以进行一些 props 变化后的操作。

class MyComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}

在 componentWillReceiveProps 函数中，我们可以判断新的 props 值是否和原来的不同，如果不同，就更新组件的 state 值。

shouldComponentUpdate

当组件的 props 或 state 更新时，shouldComponentUpdate 函数会被调用。我们可以在这里进行一些优化，判断是否需要进行更新操作。这里需要注意的是，shouldComponentUpdate 函数必须返回一个布尔值，用于表示是否进行更新操作，默认返回 true。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.value !== this.state.value) {
      return true;
    }
    return false;
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}

在这个例子中，如果 nextState 的 value 值不等于 this.state 的 value 值，那么就需要进行更新操作。

componentWillUpdate

当 shouldComponentUpdate 返回 true 时，componentWillUpdate 函数会被调用，此时我们可以在这里进行一些更新前的操作。

class MyComponent extends React.Component {
  componentWillUpdate(nextProps, nextState) {
    console.log('更新前的操作：' + this.state.value + ' -> ' + nextState.value);
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}

在这个例子中，我们在 componentWillUpdate 函数中打印了更新前后的数值。

componentDidUpdate

在更新组件后，componentDidUpdate 函数会被调用，我们可以在这里操作 DOM，比如更新某个元素的内容。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    console.log('更新后的操作：' + prevState.value + ' -> ' + this.state.value);
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}

在这个例子中，我们在 componentDidUpdate 函数中打印了更新前后的数值。

示例

下面是一段代码，在该组件的值更新时，会异步向服务器请求数据，并展示请求返回的结果：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value === this.props.value && nextState.data === this.state.data) {
      return false;
    }
    return true;
  }

  componentWillUpdate(nextProps, nextState) {
    this.fetchData(nextProps.value);
  }

  fetchData(value) {
    setTimeout(() => {
      this.setState({ data: `请求结果：${value}` });
    }, 2000);
  }

  handleInputChange(event) {
    this.props.onChange(event.target.value);
  }

  render() {
    return (
      <div>
        <input value={this.props.value} onChange={this.handleInputChange} />
        <div>{this.state.data}</div>
      </div>
    );
  }
}

在该组件中，当传入的 value 值更新时，shouldComponentUpdate 函数会被调用，如果新旧 props/state 没有变化，就返回 false，否则返回 true，接着 componentWillUpdate 函数会被调用，我们在这里异步向服务器请求数据，然后在 fetchData 函数中更新组件的 state 值，最后在 render 函数中展示请求返回的结果。

这是一个简单的异步请求例子，考虑到 react-hook, 可以使用 useEffect 来替代 componentWillUpdate 和 componentDidUpdate。