浅谈React Component生命周期函数

下面我会详细讲解React Component生命周期函数的完整攻略，包含生命周期函数的概念介绍、分类讲解、和生命周期函数示例说明等内容。

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

React组件的生命周期函数，简单来说，便是指React组件在运行期间，所出现的一些特定时期、特定情况下所自动执行的一些函数。

这些生命周期函数可以让你控制组件在运行过程中的各个阶段，以及在这些时期中，所执行的特定任务。

常用的生命周期函数分为三个阶段：

挂载阶段（Mounting）
更新阶段（Updating）
卸载阶段（Unmounting）

具体来讲，就是这些生命周期函数是在组件被创建插入到 DOM、被更新后重新渲染以及被销毁时会自动被触发。

二、React组件的生命周期函数分类

1. 挂载阶段的生命周期函数

在挂载一个 React 组件之前和挂载之后，React 会自动调用一些钩子函数和生命周期函数。常见的挂载钩子函数包括：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

这些钩子函数的功能非常类似。它们都与组件渲染到 DOM 中有关，下面分别解释每个函数的作用：

constructor(props)：用于组件的初始化，也可以在这里设置组件的状态（state）。另外，在 constructor 需要调用 super(props) ，这是继承 React.Component 时必须调用的。
static getDerivedStateFromProps(props, state)：这是一个静态方法，不应该调用 this。在组件创建或更新后，这个函数都会自动调用，并将 nextProps 和 prevState 作为参数，这样你就可以处理这些参数并在组件中返回一个对象来更新你的状态。
render()：render 方法是每个组件必须定义的方法。它的作用是依据当前的 props 和 state 以及组件自身的状态，返回一个描述组件节点和子节点的 React 元素（简单来说就是组件呈现在页面上的样子）。
componentDidMount()：使用这个钩子可以您的应用程序要求 React 组件渲染后，立刻执行某些操作。这个函数在初次渲染的时候会被调用一次。

一个挂载阶段的生命周期示例：

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

上面这个组件包含了构造函数 constructor、render 和 componentDidMount 等生命周期函数。当组件挂载时，已经被执行了这三个函数。

2. 更新阶段的生命周期函数

React 组件也会在更新的时候发生一些钩子函数与生命周期函数的变化。常见的更新钩子函数包括：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

下面我们来分别介绍：

shouldComponentUpdate(nextProps, nextState)：shouldComponentUpdate 方法会在更新阶段执行，并返回一个 Boolean 值，表示这个组件是否需要重新渲染。如果 shouldComponentUpdate 返回“false”，则 React 不会重新渲染当前组件。这个方法可以用来优化你的应用程序，可以避免不必要的渲染，提高程序的性能。
getSnapshotBeforeUpdate(prevProps, prevState)：这个方法在更新阶段内发生，返回一个值，这个值可以作为 componentDidUpdate 的第三个参数。
componentDidUpdate(prevProps, prevState, snapshot)：componentDidUpdate 方法在组件更新后执行。它接受的参数包括 prevProps、prevState、snapshot。你也可以调用 setState() 在 componentDidUpdate 中，并且在更新后再次触发组件的重新渲染。

一个更新阶段的生命周期示例：

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

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.count === nextState.count) {
      return false;
    }
    return true;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

这个组件中的 shouldComponentUpdate 方法判断当前 state 是否相等，如果相等则返回 false，这样就避免不必要的渲染。

3. 卸载阶段的生命周期函数

组件在销毁之前，React 会执行一些钩子函数与生命周期函数。常见的卸载钩子函数包括：

componentWillUnmount()

这个钩子函数的作用是在组件被销毁前，做一些清理工作，比如定时器、事件处理器的清理等。

一个卸载阶段的生命周期示例：

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

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
      </div>
    );
  }
}

这个组件中，我们添加了一个点击事件处理函数，并在 componentWillUnmount 中将这个事件处理器彻底清除掉。

三、生命周期函数总结

经过上面的讲解，我相信大家对 React 组件的生命周期函数应该算是有所了解了。下面再简要概括一下：

挂载阶段（Mounting）
constructor(props)
static getDerivedStateFromProps(props, state)
render()
componentDidMount()
更新阶段（Updating）
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState)
卸载阶段（Unmounting）
componentWillUnmount()

钩子函数可以帮助我们控制到达某些节点或事件的时候，自动执行一些相关的操作。

React 组件的生命周期函数也可以帮助我们来掌控组件运行时的各个阶段，以及在其中所执行的具体任务。上述通过示例讲解生命周期函数的分类介绍，也希望大家可以从中明白它们的用途，舒适感受它们发挥的威力。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈React Component生命周期函数 - Python技术站