React 生命周期函数详解

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

React 是一种流行的前端框架，它让开发者更快更方便地创建并管理 Web 应用程序。在 React 中，生命周期函数是至关重要的部分，它们可以方便地控制组件的加载、更新和销毁的过程。本文将深入探讨 React 生命周期函数的作用、使用方法、钩子函数执行的顺序，以及常见使用场景。

生命周期函数用途

在 React 组件中使用生命周期函数可以帮助开发者处理不同的场景。例如，在组件渲染到页面之前，我们可以在生命周期函数中添加一些逻辑，例如从后端获取数据、初始化状态等；在组件更新时，我们可以使用生命周期函数来检测数据变换、更新组件状态等。

生命周期图表

在深入研究 React 生命周期函数工作原理之前，我们需要先了解一下不同的生命周期函数的执行顺序。以下是一个图表展示。

根据图表，我们可以将 React 生命周期函数分为以下几种不同的类别：

  • Mounting：组件从 HTML 中构建成 DOM。这个过程只会执行一次。
  • Updating：组件被更新，通常是由于 props 或者 state 改变而导致。
  • Unmounting：组件从 DOM 中卸载，通常是因为它不再被需要了。
  • Error Handling：当 React 组件发生错误时，这些函数会被调用。

现在，我们来逐一讨论这些生命周期函数。

Mounting

在组件的生命周期中，Mounting 阶段是最先执行的。这个阶段发生在组件第一次加载时。以下是 React Mounting 阶段中所有可能被执行的生命周期函数：

constructor()

构造函数是一个 React 组件中的非常重要的函数，它是组件实例化时执行的第一个函数。构造函数通常用于初始化组件的状态（State），并通过 super(props) 继承引入 props 对象。

----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - ------- ---
  -
-

static getDerivedStateFromProps(props, state)

组件的 getDerivedStateFromProps 生命周期函数的主要作用是让组件在更新前，state 对象（或者说组件状态）能够通过传入的新 props 对象进行更新、重新赋值。

该函数返回值对象会与原 state 进行合并，具体过程需要注意以下几点：

  • 该方法是静态方法，因此不能访问 this 对象
  • 在挂载阶段和更新阶段均会被调用
  • 若返回值为 null，则表示不暴露 state 对象
  • 如果应该更新则返回新的 state 对象，否则返回 null，表示不进行更新
----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - ------- ---
  -

  ------ ------------------------------- ------ -
      -- -- -----
      -- ------------ --- ------------ -
        ------------------------ -------------
        ------ -
          ------ -----------
        --
      -
      -- -----
      ------ -----
  -
-

render()

React 的 render 函数是必须的，它是组件的最主要部分。React 会用它来创造实际的 DOM 元素并返回一个 React 元素的描述对象，可理解为 React-land 中的虚拟 DOM。

该函数的返回值应该是唯一的根节点，而且必须被包含在一个盒子里（这通常是一个 div 对象）。在该函数的调用内部，可以使用 this.props 来获取传递给组件的属性（props）和 this.state 访问定义在函数内部的组件状态。

----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - ------- ---
  -

  ------ ------------------------------- ------ -
    -- -- -----
  -

  -------- -
    ------ -
      -----
        --------- ----------------------
      ------
    --
  -
-

componentDidMount()

组件挂载已经完成，并且元素已经在 DOM 中显示，componentDidMount 被调用。在这个函数内部，可以做一些基于 DOM 的操作，例如从远程接口（API）中获取数据、添加事件（event）监听、获取 URL 参数等等。

----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - ------- ---
  -

  ------ ------------------------------- ------ -
    -- -- -----
  -

  -------- -
    ------ -
      -----
        --------- ----------------------
      ------
    --
  -

  ------------------- -
    -- -------------- --- --
    ------------------------------ -- -
      --------------- ----- ------ ---
    ---
  -
-

Updating

在 React 中，“Updating” 是指组件根据变化而更新。在组件的生命周期中，更新阶段发生在更新后。更新阶段涉及以下的生命周期函数：

static getDerivedStateFromProps(props, state)

如前所述， getDerivedStateFromProps 函数也能够在更新阶段中运行，它会在组件接收新的 props 值或者 state 值时被调用。

shouldComponentUpdate(nextProps, nextState)

该函数用于判断是否继续更改组件状态。它必须返回一个布尔值，指示是否应该调用 render() 函数并使 DOM 保持一致。如果返回 false，则 React 将通过跳过更新阶段优化性能。

----- ----------- ------- --------------- -
  -------------------------------- ---------- -
    -- ----------------- --- ---------------- -
        ------ ------
    -
    ------ -----
  -
-

render()

在 componentWillMount() 函数之前运行，render() 函数在更新阶段中能够显示组件的新状态，并使用 React 描述 DOM 元素。在更新阶段中，使用相同的 props 和 state 重新运行 render() 函数，并使用该函数返回的描述对象更新 UI。

componentDidUpdate(prevProps, prevState, snapshot)

在组件的更新阶段中，将在“Updating”阶段结束后调用 componentDidUpdate() 函数。该函数与 componentDidMount() 函数类似，都可执行一些操作，例如从 API 获取数据、修改 DOM 等。

----- ----------- ------- --------------- -
  ----------------------------- ---------- --------- -
    -- ------------- --- -------------- -
      ------------------------------
    -
  -
-

Unmounting

在组件的生命周期过程中，Unmounting 阶段表示该组件不再需要，并从 DOM 中卸载。以下函数是 Unmounting 阶段中的生命周期函数：

componentWillUnmount()

该函数在组件被卸载时运行，执行一些基于 DOM 对象的操作，如释放事件监听器或取消定时器。

----- ----------- ------- --------------- -
  ---------------------- -
    ------------------------------------- ------------------
  -
-

Error Handling

在 React 组件开发中，可能会出现一些错误，包括捕获到的 JavaScript 错误或 React 可能的错误等。如果组件中执行的某些函数抛出错误，那么 React 会照顾到它，进入 Error Handling 阶段。

以下是与 Error Handling 阶段中的挂钩函数：

static getDerivedStateFromError(error)

该函数将在组件的子项或组件自身抛出异常时被调用。该函数的参数是已被抛出异常的对象。该函数将返回一个状态对象，以指示该组件遇到错误。

componentDidCatch(error, info)

该函数用于在组件发生错误时捕获相关信息，例如错误信息、发生错误的代码位置以及函数调用栈。这些信息可能用于帮助调试代码，但是不能对用户发送错误信息。

----- ----------- ------- --------------- -
  ------ ------------------------------- -
    ------ - --------- ---- --
  -

  ------------------------ ----- -
    -------------------------- ---------------------
  -

  -------- -
    -- --------------------- -
      ------ --------- --------- ---- ------------
    -
    ------ --------------------
  -
-

结论

React 生命周期函数可以帮助开发人员在多个场景下更好地管理组件的构建和销毁过程，并优化组件加载的性能。通过深入了解每个生命周期函数的用途，我们可以更好地应用这些函数到我们自己的 React 组件中。希望你通过本文详细了解 React 生命周期函数的使用方法，并成功运用到你的 React 项目中去。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671df6d92e7021665ef4b3c0

阅读全文

猜你喜欢

  • ES10 中异步函数和异步迭代器的使用方法

    ES10 中异步函数和异步迭代器的使用方法 ES10 是新增了异步函数和异步迭代器的 JavaScript 版本。这些功能让前端开发具有更高的可维护性和灵活性。在本文中，我们将简要介绍这些新功能，并提...

    15 天前
  • Redis 中的 string 类型的最佳实践

    当我们谈到 NoSQL 数据库时，很有可能会提到 Redis。Redis 是一个非常受欢迎的键值数据库，它支持多种数据类型，其中 string 类型是最基础和最常用的类型之一。

    15 天前
  • 如何使用 Headless CMS 实现数据可视化

    如何使用 Headless CMS 实现数据可视化 前端数据可视化是一个非常重要的技术，在数据驱动时代，数据分析及其可视化是每个前端工程师必须掌握的技能之一。然而，许多 Web 开发者在实现这个过程中...

    15 天前
  • SPA 应用在 React Native 项目中的应用实践

    React Native是Facebook在2015年开源推出的一款跨平台移动应用开发框架，它的特点是使用JavaScript语言开发iOS和Android应用，同时能够使用原生组件，提供Native...

    15 天前
  • Redux 核心原理解析及实战应用

    前言 Redux 是一种 JavaScript 状态管理器，适用于大型应用程序中的数据流控制。它是 React 的常用工具之一，但它并不限于 React 或任何特定的视图库/框架。

    15 天前
  • Koa2 项目开发实践经验与技巧分享

    前言 Koa是一个轻量级的Node.js web框架，它的设计灵感来源于Express，但是使用了ES6的generator，让异步处理更加优雅简洁。Koa2是Koa框架的升级版本，采用了async/...

    15 天前
  • 解决 ES9 中 Object.fromEntries() 方法的数据类型错误问题

    问题背景 在 ES9 中，新增了 Object.fromEntries() 方法，用于将键值对数组（entries）转换为对象。例如： ----- ------- - - ------- ----...

    15 天前
  • 面向方向的测试实践：使用 Cypress 在 Angular 中进行测试

    面向方向的测试实践：使用 Cypress 在 Angular 中进行测试 近年来，前端领域快速发展，JavaScript 框架和库层出不穷。在这个快节奏的开发环境下，如何快速且高效地进行测试成为了每个...

    15 天前
  • Tailwind 如何优化网页设计，提升用户使用体验

    在当今互联网时代，网页设计越来越重要，因为它能直接影响到用户对网站的使用体验和整体印象。而采用优秀的 CSS 框架可以大大提升网页设计的质量和效率。本文将介绍一个最近备受关注的 CSS 框架 Tail...

    15 天前
  • 在 Jest 中使用钩子函数以优化测试性能

    前言 Jest 是目前最流行的 JavaScript 测试框架之一，用于编写各种类型的测试，如单元测试、集成测试和端到端测试等。 Jest 具有许多功能和配置选项，可以帮助我们编写高效和可维护的测试。

    15 天前
  • 了解 GraphQL 的错误处理

    前言 随着互联网的高速发展，前端技术也在不断地更新和演进。在前端开发中，与后端进行数据交互是非常重要的，而 GraphQL 作为一种新兴的数据查询语言，已经被前端开发者广泛使用。

    15 天前
  • Fastify 应用程序的优化技巧

    Fastify 是一个快速且低开销的 Web 框架，适用于构建高性能的应用程序。它的设计实现了低延迟，并且其插件系统提供了众多的扩展性。然而，为了让 Fastify 的性能达到最佳状态，我们需要实施一...

    15 天前
  • 前端原生 JavaScript 性能优化教程

    随着互联网的发展，前端技术已经成为了一个非常重要的领域。而 JavaScript 更是前端技术中最重要的一环。但是，JavaScript 的性能一直都是一个令人头疼的问题。

    15 天前
  • Serverless 架构实现文件存储服务

    随着云计算和大数据时代的到来，越来越多的应用程序需要处理大量的数据。这些数据需要可靠的存储和高效的访问，但传统的文件存储服务往往需要自建数据中心或托管服务，且成本较高。

    15 天前
  • RxJS 如何实现反应式表单

    随着 Web 应用程序的发展和复杂性增加，表单处理也变得越来越重要。随着许多现代应用程序的出现，例如单页应用程序和响应式 Web 设计，对表单的处理变得更加复杂。传统的表单处理方法会变得笨重，代码也会...

    15 天前
  • PM2 进程管理和监控的最佳实践与安全性处理

    前言 在 Web 前端开发中，我们经常需要启动多个进程来执行不同的任务。而 PM2 作为目前被广泛使用的进程管理器，可以大大简化进程管理的复杂度。本文将介绍 PM2 的基本用法以及最佳实践和安全性处理...

    15 天前
  • 在 Node.js 项目中使用 Mocha 和 Supertest 进行 API 集成测试的实践

    什么是 API 集成测试？ API 集成测试是一种软件测试方法，用于测试多个应用程序之间的交互。在网络应用程序中，API 集成测试用于测试服务器端和客户端之间的数据通信是否正常，以及用于检查应用程序能...

    15 天前
  • Material Design 中的按钮组件设计原则和应用技巧总结

    Material Design 是一种设计语言，由 Google 推出，主要应用于移动端和 Web 应用程序的设计。其中，按钮是 Material Design 中非常重要的一部分，也是用户与应用程序...

    15 天前
  • 长期支持版的 Babel 7.10.0 已发布：修复 11 个 Bug

    Babel 7.10.0 已经发布，这是一个长期支持版（LTS）的版本，它将在未来几年内得到支持和更新。本次发布修复了 11 个 Bug，包括一些内部工具和插件的更新，还增加了一些新特性和改进。

    15 天前
  • RESTful API 设计模式：分页处理

    前言 RESTful API 是现代 Web 应用程序开发的重要组成部分。其中一个常见的问题是如何处理大量数据的 API 请求。当用户需要查询或者展示数百或数千条数据时，全量返回数据可能会导致性能问题...

    15 天前

相关推荐

    暂无文章