React 中的生命周期钩子函数详解-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的 JavaScript 库，用于构建用户界面。React 中的生命周期钩子函数是 React 组件中非常重要的一部分。生命周期钩子函数可以让您在组件的不同阶段执行操作。本文将详细介绍 React 的生命周期钩子函数。

生命周期钩子函数

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

Mounting（挂载）：在组件被创建并插入 DOM 中时发生。
Updating（更新）：在组件被重新渲染时发生。
Unmounting（卸载）：在组件从 DOM 中移除时发生。

每个阶段都有一些生命周期钩子函数，这些函数会在不同的时间点被调用。下面是这些函数的列表：

Mounting 阶段

Mounting 阶段包括以下生命周期钩子函数：

constructor(props)：组件被创建时调用。在这个函数中，您可以初始化组件的状态和绑定事件处理程序。
static getDerivedStateFromProps(props, state)：在组件被挂载之前调用，它会在每次渲染之前被调用。这个函数返回一个对象，用于更新组件的状态。
render()：在组件被挂载时调用。这个函数返回一个 React 元素，用于渲染组件的用户界面。
componentDidMount()：在组件被挂载之后调用。在这个函数中，您可以执行任何必要的 DOM 操作，如获取元素的引用或添加事件监听器。

Updating 阶段

Updating 阶段包括以下生命周期钩子函数：

static getDerivedStateFromProps(props, state)：在组件更新之前调用。这个函数返回一个对象，用于更新组件的状态。
shouldComponentUpdate(nextProps, nextState)：在组件更新之前调用。如果这个函数返回 false，组件将不会被更新。
render()：在组件被更新时调用。这个函数返回一个 React 元素，用于渲染组件的用户界面。
getSnapshotBeforeUpdate(prevProps, prevState)：在组件被更新之前调用。这个函数返回一个值，用于更新组件的状态。
componentDidUpdate(prevProps, prevState, snapshot)：在组件被更新之后调用。在这个函数中，您可以执行任何必要的 DOM 操作，如获取元素的引用或添加事件监听器。

Unmounting 阶段

Unmounting 阶段包括以下生命周期钩子函数：

componentWillUnmount()：在组件被卸载之前调用。在这个函数中，您可以执行任何必要的清理操作，如取消事件监听器或清除定时器。

生命周期钩子函数的执行顺序

React 生命周期钩子函数的执行顺序如下：

constructor(props)
static getDerivedStateFromProps(props, state)
render()
componentDidMount()
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)
componentWillUnmount()

生命周期钩子函数的示例代码

下面是一个 React 组件，它演示了生命周期钩子函数的使用：

// www.javascriptcn.com code example
import React from 'react';

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

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return null;
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

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

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

export default MyComponent;

在这个示例中，组件被创建并插入 DOM 中时，将依次调用 constructor()、static getDerivedStateFromProps()、render() 和 componentDidMount()。当用户点击按钮时，将依次调用 shouldComponentUpdate()、render()、getSnapshotBeforeUpdate() 和 componentDidUpdate()。当组件被卸载时，将调用 componentWillUnmount()。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d11773a941bf713425205f

React 中的生命周期钩子函数详解