前端React篇之React的生命周期有哪些？

目录

  • React的生命周期有哪些？
    • 挂载阶段（Mounting）
    • 更新阶段（Updating）
    • 卸载阶段（Unmounting）
    • 错误处理阶段（Error Handling）
  • React常见的生命周期
  • React主要生命周期

React的生命周期有哪些？

请添加图片描述

在React中，组件的生命周期经历了不同阶段，每个阶段都有对应的生命周期方法。以下是React 16版本之后的组件生命周期方法：

  1. 挂载阶段（Mounting）：

    • constructor(props)：组件的构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
    • static getDerivedStateFromProps(props, state)：在组件实例化时和接收新的props时调用，用于根据props更新state。
    • render()：准备渲染组件的UI结构。
    • componentDidMount()：组件第一次渲染完成后调用，通常用于执行一次性的操作，如数据获取、订阅事件等。

  2. 更新阶段（Updating）：

    • static getDerivedStateFromProps(props, state)：在组件接收新的props时调用，用于根据新的props更新state。
    • shouldComponentUpdate(nextProps, nextState)：决定组件是否需要重新渲染，可以通过返回false来阻止不必要的渲染。
    • render()：重新渲染组件的UI结构。
    • getSnapshotBeforeUpdate(prevProps, prevState)：在最近一次渲染输出（提交到 DOM 上）之前调用，可以用于获取当前 DOM 的快照信息。
    • componentDidUpdate(prevProps, prevState, snapshot)：组件更新完成后调用，通常用于处理更新后的操作，如数据同步、DOM 操作等。

  3. 卸载阶段（Unmounting）：

    • componentWillUnmount()：组件即将被卸载和销毁时调用，用于清理定时器、取消订阅等操作。

  4. 错误处理阶段（Error Handling）：

    • static getDerivedStateFromError(error)：当子组件抛出错误时调用，用于更新组件的state以渲染降级 UI。
    • componentDidCatch(error, info)：用于捕获组件内部的 JavaScript 错误、网络请求失败等异常情况，并进行错误处理。

  5. 新的生命周期方法（可选）：

    • static getDerivedStateFromError(error) 和 componentDidCatch(error, info) 是 React 16 引入的新的错误处理生命周期方法。

这些生命周期方法在组件的不同阶段被调用，开发者可以利用这些方法来管理组件的状态、执行特定的操作或者处理错误。值得注意的是，随着React版本的更新，一些生命周期方法可能会被废弃或者替代，因此在使用时需要留意官方文档的更新。

挂载阶段（Mounting）

在React组件的挂载阶段（Mounting Phase）中会依次执行以下方法：

  1. constructor(props)：

    • 构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
    • 在构造函数中通常做两件事情：初始化组件的状态和绑定事件处理方法。
    • 如果不需要初始化state或绑定方法，则不需要显式定义构造函数。

  2. static getDerivedStateFromProps(props, state)：

    • 静态方法，用于根据props更新state。
    • 在组件实例化时和接收新props时调用，返回一个对象来更新当前state，如果不需要更新可以返回null。
    • 在React 16.4版本及以上，setState和forceUpdate也会触发该生命周期方法。

  3. render()：

    • 渲染方法，准备渲染组件的UI结构。
    • 根据状态state和属性props渲染组件，返回需要渲染的内容。
    • 只做一件事情：返回需要渲染的内容，不要在这个方法内部做其他业务逻辑。

  4. componentDidMount()：

    • 在组件第一次渲染完成后调用，通常用于执行一次性操作，如数据获取、订阅事件等。
    • 可以执行依赖于DOM的操作、发送网络请求、添加订阅消息等。
    • 避免在componentDidMount中直接调用setState，因为会触发额外的渲染。

下面是一个示例代码，展示了挂载阶段的一些典型使用方法：

import React, { Component } from 'react';class SampleComponent extends Component {constructor(props) {super(props);this.state = {counter: 0,preCounter: 0};}static getDerivedStateFromProps(props, state) {if (props.counter !== state.preCounter) {return {counter: props.counter,preCounter: props.counter};}return null;}componentDidMount() {// 在组件挂载后，将计数数字变为1this.setState({counter: 1});}render() {return (<div><h1>Hello, world! {this.state.counter}</h1></div>);}
}export default SampleComponent;

在这个示例中，我们展示了挂载阶段的相关方法的使用，包括constructor、getDerivedStateFromProps、render和componentDidMount。这些方法在组件的挂载阶段依次被调用，执行相应的操作以完成组件的初始化和渲染。

更新阶段（Updating）

更新阶段（Updating）涉及到组件在接收到新的props或者状态发生变化时的一系列生命周期方法。

  1. static getDerivedStateFromProps(props, state)：

    • 当组件接收到新的props时调用，在这个方法中可以根据新的props来更新组件的state。
    • 通过返回一个对象来更新当前的state，如果不需要更新则返回null。

  2. shouldComponentUpdate(nextProps, nextState)：

    • 用于决定组件是否需要重新渲染，可以通过返回false来阻止不必要的渲染。
    • 在这个方法中可以比较当前的props和state与下一个props和state的值，来决定是否需要更新。

  3. render()：

    • 重新渲染组件的UI结构，根据最新的props和state生成组件的内容。

  4. getSnapshotBeforeUpdate(prevProps, prevState)：

    • 在最近一次渲染输出（提交到DOM上）之前调用，可以用于获取当前DOM的快照信息。
    • 返回的值将作为第三个参数传递给componentDidUpdate方法。

  5. componentDidUpdate(prevProps, prevState, snapshot)：

    • 组件更新完成后调用，通常用于处理更新后的操作，如数据同步、DOM操作等。
    • 可以在这个方法中执行依赖于更新后DOM状态的操作。

在更新阶段，组件可能会多次重新渲染，这些生命周期方法帮助我们控制组件的更新行为，提高性能并确保组件状态的正确性。通过合理地使用这些方法，我们可以在组件更新时做出相应的处理，保持组件的稳定性和效率。

卸载阶段（Unmounting）

在卸载阶段，只有一个生命周期函数，即componentWillUnmount()。这个方法会在组件即将被卸载和销毁之前被调用。在componentWillUnmount()中，我们可以执行一些必要的清理操作，比如：

  • 清除定时器
  • 取消网络请求
  • 取消在componentDidMount()中创建的订阅等操作

在componentWillUnmount()中的主要目的是确保在组件被卸载和销毁之前进行任何必要的清理工作，以避免内存泄漏或其他不必要的资源占用。在这个阶段，我们不应该再使用setState，因为组件一旦被卸载，就不会再被挂载，也就不会触发重新渲染。

通过在componentWillUnmount()中进行适当的清理操作，我们可以确保组件在被销毁时表现良好，并且避免潜在的问题。这有助于保持应用的性能和稳定性。

错误处理阶段（Error Handling）

在React中，有两个生命周期方法用于处理组件内部错误的情况：

  1. static getDerivedStateFromError(error)：

    • 当子组件抛出错误时调用，用于更新父组件的state以渲染降级UI（Fallback UI）。
    • 这个静态方法允许父组件捕获子组件抛出的错误，并在发生错误时更新状态，以渲染备用UI来展示用户。

  2. componentDidCatch(error, info)：

    • 在后代组件抛出错误后被调用，用于捕获组件内部的JavaScript错误、网络请求失败等异常情况，进行错误处理。
    • 接收两个参数：
      • error：表示抛出的错误对象。
      • info：一个对象，其中包含有关组件引发错误的堆栈信息，通常包含componentStack等信息。

这两个生命周期方法在React中用于提供更好的错误处理机制，使得我们能够更好地管理和展示应用程序中出现的错误情况。通过适当地使用这些方法，我们可以优雅地处理组件可能出现的错误，并向用户提供更好的用户体验。

React常见的生命周期

请添加图片描述

React常见生命周期的过程大致如下：

  1. 挂载阶段：

    • 首先执行constructor构造方法，用于创建组件实例。
    • 接着执行render方法，返回需要渲染的内容。
    • React将渲染内容挂载到DOM树上。
    • 挂载完成后会执行componentDidMount生命周期函数，允许执行一些初始化操作，如数据获取或订阅事件。

  2. 更新阶段：

    • 当组件接收到新的props或调用setState、forceUpdate时，会重新调用render方法。
    • render方法返回的内容将会重新挂载到DOM树上。
    • 挂载完成后会执行componentDidUpdate生命周期函数，可以执行更新后的操作，如数据同步或DOM操作。

  3. 卸载阶段：

    • 当移除组件时，执行componentWillUnmount生命周期函数，用于清理工作，如清除定时器或取消订阅。

在React中，生命周期方法的执行顺序和作用是非常重要的，通过合理使用这些生命周期方法，我们可以控制组件的行为，确保应用程序的正常运行，并且能够在适当的时机执行特定的逻辑。

React主要生命周期

  1. getDefaultProps：在组件创建之前调用一次，用来初始化组件的Props（属性）。

  2. getInitialState：用于初始化组件的state（状态）值。

  3. componentWillMount：在React旧版本中存在，但在React 16中已被废弃。在组件创建后、render之前调用，已不推荐在此阶段执行任何操作。

  4. render：是唯一必须实现的生命周期方法。根据props和state返回一个jsx元素，用于渲染组件到界面上。有时也可返回null或false。

  5. componentDidMount：在组件挂载后立即调用，表示组件挂载完成。适合执行需要DOM操作或发起网络请求的操作，因为此时组件已经插入DOM树中。这也是推荐用于发起网络请求的时机。

这些生命周期方法的合理使用能够帮助我们控制组件的行为，确保组件的状态和Props得到正确处理，以及在适当的时机执行特定的逻辑操作。随着React版本的更新，有些生命周期方法被废弃或不推荐使用，因此了解最新的React生命周期方法也很重要。

持续学习总结记录中，回顾一下上面的内容：
React的生命周期包括几个重要阶段：首先是挂载阶段，包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法；接着是更新阶段，涵盖shouldComponentUpdate、render和componentDidUpdate方法；最后是卸载阶段，包括componentWillUnmount方法。这些生命周期方法帮助我们在组件创建、更新和销毁时执行特定的操作，确保应用程序的正常运行和良好的用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2869817.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

【List集合】List接口源码解读一（ArrayList）

【List集合】List接口源码解读一（ArrayList）

目录 前言 1. List接口的基本信息 2. ArrayList 2.1.ArrayList 的基本信息 2.2. ArrayList 的构造方法 2.2.1 ArrayList 的构造方法一 2.2.2 ArrayList 的构造方法二 2.2.3 ArrayList 的构造方法三 2.3 ArrayList 的扩容方式 总结 前言 Java 语言由于其跨平台、社区良…
阅读更多...
微信小程序开发系列（三十四）·自定义组件的创建、注册以及使用（数据和方法事件的使用）

微信小程序开发系列（三十四）·自定义组件的创建、注册以及使用（数据和方法事件的使用）

目录 1. 分类和简介 2. 公共组件 2.1 创建 2.2 注册 2.3 使用 3. 页面组件 3.1 创建 3.2 注册 3.3 使用 4. 组件的数据和方法的使用 4.1 组件数据的修改 4.2 方法事件的使用 1. 分类和简介 小程序目前已经支持组件化开发&#xff0c;可以将页面中的功能…
阅读更多...
Three 材质纹理 （总结三）

Three 材质纹理 （总结三）

THREE.MeshLambertMaterial&#xff08;网格 Lambert 材质&#xff09; 该材质使用基于非物理的Lambertian模型来计算反射率。可以用来创建暗淡的并不光亮的表面&#xff0c;该材质非常易用&#xff0c;而且会与场景中的光源产生反应。 MeshLambertMaterial属性 # .color : …
阅读更多...
24年上半年英语四六级报名时间25地汇总一览表

24年上半年英语四六级报名时间25地汇总一览表

目前有25地公布了报名时间&#xff0c;大多集中在3月中下旬&#xff0c;具体时间以学校通知为准。 7个省份官宣 • 贵州(官方)&#xff1a;3月18日12:00-3月29日16:00 • 黑龙江(官方)&#xff1a;3月18日14:00-3月29日17:00 • 江西(官方)&#xff1a;3月19日6:00-3月25日17:0…
阅读更多...
05.BOM对象

05.BOM对象

一、js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&#xff0c; 定义了一套操作HTML文档的APIBOM 浏览器对象模型&#xff0c;定义了一套操作浏览器窗口的API 二、windo…
阅读更多...
deepseek-coder模型量化

deepseek-coder模型量化

1 简介 DeepSeek-Coder在多种编程语言和各种基准测试中取得了开源代码模型中最先进的性能。 为尝试在开发板进行部署&#xff0c;首先利用llama.cpp对其进行量化。 2 llama.cpp安装 git clone之后进入文件夹make即可&#xff0c;再将依赖补全pip install -r requirements.tx…
阅读更多...
【Miniconda】基于conda避免运行多个PyTorch项目时发生版本冲突

【Miniconda】基于conda避免运行多个PyTorch项目时发生版本冲突

【Miniconda】基于conda避免运行多个PyTorch项目时发生版本冲突 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到…
阅读更多...
原创 《vtk9 book》 官方web版 第四章 - 可视化管线（1 / 2）

原创 《vtk9 book》 官方web版 第四章 - 可视化管线（1 / 2）

在前一章中&#xff0c;我们使用简单的数学模型创建了图形图像&#xff0c;用于光照、视图和几何。光照模型包括环境光、漫反射和镜面效果。视图包括透视和投影的效果。几何被定义为一组静态的图形原语&#xff0c;如点和多边形。为了描述可视化过程&#xff0c;我们需要扩展我…
阅读更多...
读算法的陷阱：超级平台、算法垄断与场景欺骗笔记12_移动平台（上）

读算法的陷阱：超级平台、算法垄断与场景欺骗笔记12_移动平台（上）

1. 广告 1.1. 广告收入的来源 1.1.1. 向客户推荐广告投放网址 1.1.2. 提供有效提高产品广告点击率的咨询服务 1.1.3. 从合作伙伴的广告收入中捞上一笔 1.2. 对于广告主来讲&#xff0c;他们无意于与各家网站逐一谈判 1.2.1. 这种方式一是成本过高&#xff0c;二是费时费力…
阅读更多...
Github 2024-03-17 php开源项目日报 Top9

Github 2024-03-17 php开源项目日报 Top9

根据Github Trendings的统计，今日(2024-03-17统计)共有9个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量PHP项目9Blade项目2Laravel：表达力和优雅的 Web 应用程序框架 创建周期：4631 天开发语言：PHP, BladeStar数量：75969 个Fork数量：24281 次关…
阅读更多...
Delphi7应用教程学习1.3【练习题目】：文本及悬停文字的显示

Delphi7应用教程学习1.3【练习题目】：文本及悬停文字的显示

这个例子主要用到了btn的Hint 属性&#xff0c;Hint是提示的意思。 还有Delphi7还是很好用的&#xff0c;改变了的属性是粗体&#xff0c;默认没有改变的属性为细体。
阅读更多...
力扣新思路题：字符串轮转

力扣新思路题：字符串轮转

非常简单的思路&#xff1a;将两个字符串s1接起来&#xff0c;并判断s2字符串是否是加长版s1字符串的子串 bool isFlipedString(char* s1, char* s2){if (strlen(s1) ! strlen(s2)) {return false;}int len strlen(s1);int i 0;char* arr (char*)malloc(sizeof(char) * len…
阅读更多...
深入理解RAG:检索与生成的融合

深入理解RAG:检索与生成的融合

原文地址&#xff1a;https://dev.to/portkey/understanding-rag-a-deeper-dive-into-the-fusion-of-retrieval-and-generation-1l4b 深入理解RAG:检索与生成的融合 检索增强生成(RAG)模型代表了检索系统和生成模型两大不同但互补组件完美结合的杰作。通过无缝集成相关信息检…
阅读更多...
(x+2y+3z+4w)^4展开式经过合并同类项之后,xyzw的系数为?

(x+2y+3z+4w)^4展开式经过合并同类项之后,xyzw的系数为?

求的展开式经过合并同类项之后&#xff0c;的系数 根据二项式定理&#xff0c;的系数为&#xff1a;
阅读更多...
HarmonyOS NEXT应用开发—视频全屏切换案例

HarmonyOS NEXT应用开发—视频全屏切换案例

介绍 本示例介绍了Video组件和ohos.window接口实现媒体全屏的功能。 该场景多用于首页瀑布流媒体播放等。 效果图预览 使用说明&#xff1a; 点击全屏按钮&#xff0c;横屏媒体窗口。点击恢复窗口按钮&#xff0c;恢复媒体窗口。 实现步骤 在Video组件内调用 onFullscreen…
阅读更多...
ARM 汇编指令:(七) STM/LDM多寄存器加载/多存储指令

ARM 汇编指令:(七) STM/LDM多寄存器加载/多存储指令

目录 一.四种栈 1.满增栈&#xff1a;进栈&#xff08;先移动指针再入栈&#xff0c;指针往地址增大的方向移动&#xff09;&#xff1b;出 栈&#xff08;先出栈&#xff0c;栈指针往地址减小的地方移动&#xff09;。 2.满减栈&#xff1a;进栈&#xff08;先移动指针再入…
阅读更多...
Rust 程序设计语言学习——所有权

Rust 程序设计语言学习——所有权

这一节主要来学习 Rust 语言的其他特性&#xff0c;所有权、引用与借用、Slice 类型。 1 所有权 Rust 的核心功能&#xff08;之一&#xff09;是所有权&#xff08;ownership&#xff09;。虽然该功能很容易解释&#xff0c;但它对语言的其他部分有着深刻的影响。 所有程序…
阅读更多...
【ESP32 IDF】I2C的使用

【ESP32 IDF】I2C的使用

文章目录 前言一、I2C驱动使用的步骤二、I2C的使用2.1 配置驱动程序2.2 安装驱动程序2.3 主机写入数据写入数据的过程接收数据的过程 总结 前言 ESP32是一款强大的微控制器&#xff0c;广泛应用于物联网&#xff08;IoT&#xff09;和嵌入式系统开发。它具备丰富的硬件接口&am…
阅读更多...
23. BI - 基于酒店建立内容推荐系统

23. BI - 基于酒店建立内容推荐系统

本文为 「茶桁的 AI 秘籍 - BI 篇 第 23 篇」 文章目录 基于内容的推荐酒店数据说明TF-IDF基于酒店做推荐数据探索建模并计算执行推荐 总结 Hi&#xff0c;你好。我是茶桁。 上一节课咱们终于是将矩阵分解的完整内容全部都给大家讲完了。矩阵分解是推荐系统里面比较重要的一个环…
阅读更多...
前端Vue开发中的百度地图定位组件：实现定位、反向地址查询与详细地址展示

前端Vue开发中的百度地图定位组件：实现定位、反向地址查询与详细地址展示

一、引言 在前端开发中&#xff0c;地图定位是一个重要的功能&#xff0c;它能够为用户提供直观、便捷的服务。在许多应用场景中&#xff0c;我们不仅需要显示当前的地图定位&#xff0c;还需要将定位坐标反向转成地址&#xff0c;并展示详细地址。本文将介绍如何使用Vue和百度…
阅读更多...
最新文章

Copyright @ 2022~2023