前端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://www.mzph.cn/news/750308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一练:LeeCode-14、最长公共前缀【字符串+最值判定】

编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例 1&#xff1a; 输入&#xff1a;strs ["flower","flow","flight"] 输出&#xff1a;"fl"示例 2&#xff1a; …

27-Java MVC 模式

Java空对象模式 实现范例 MVC模式代表 Model-View-Controller&#xff08;模型-视图-控制器&#xff09; 模式MVC模式用于应用程序的分层开发 Model&#xff08;模型&#xff09; - 模型代表一个存取数据的对象或 JAVA POJO 它也可以带有逻辑&#xff0c;在数据变化时更新控制…

渔业安全生产综合管理指挥系统-航迹数据优化方案

文章目录 引言I 轨迹数据模型II 轨迹信息索引III 数据同步方案3.1 多服务器多表同步3.2 增量数据同步3.3 执行IV 配置ESV 团队建设5.1 前端(web GIS)5.2 后端(Java)see also引言 背景: 目前系统查询轨迹数据比较慢的原因是没有进行读写分离,轨迹数据的查询和写入都是SQL…

Linux查看mysql安装目录

在Linux系统中&#xff0c;MySQL的安装目录通常位于/usr/local/mysql或/opt/mysql目录下。这些目录是MySQL在Linux系统中默认的安装目录&#xff0c;用户可以在这些目录下找到MySQL的所有文件和配置信息。 要查看MySQL的安装目录&#xff0c;可以使用以下命令&#xff1a; wh…

踏上机器学习的征程:探索基础概念与学习模式

摘要: 机器学习是当今科技领域最具前沿和应用价值的技术之一,它正在改变我们对数据的理解和利用方式。本文将引导读者深入了解机器学习的基本概念,包括监督学习、无监督学习和半监督学习等,并通过生动的例子解释这些概念,帮助读者迈出学习机器学习的第一步。 导言: 随着…

Ubuntu 如何安装 Beyond Compare?

Ubuntu20.04安装Beyond Compare 4.3.7 一、官网下载方式一&#xff1a;方法二&#xff1a;使用 .deb 包安装 二、安装相关依赖和bcompare三、破解常见错误解决方法 ) 文件比较工具Beyond Compare是一套由Scooter Software推出的文件比较工具。主要用途是对比两个文件夹或者文件…

AST解web控制流平坦化

此代码可以解决大部分 while if else 控制流平坦化原理&#xff1a; 先将 if 语句转为 switch 语句&#xff0c;再将 switch 分支合并&#xff0c;最后删除已合并的分支&#xff08;具体看代码&#xff09; 实现效果图 首先安装依赖&#xff1a; npm install babel/parser npm…

指针基础 - golang版

文章目录 1、指针2、基础语法2.1 定义指针2.2 取地址操作符 &2.3 解引用操作符 * 3、实战用法3.1 指针作为函数参数3.2 指针和结构体3.3 指针和接收者 1、指针 变量是存储值的地方&#xff1b;指针的值是一个变量的地址&#xff1b;不是所有的值都有地址&#xff0c;但是所…

【K8s】如何使用Kubernetes Ingress: Contour

使用Kubernetes Ingress: Contour 目录 使用Kubernetes Ingress: Contour没有 Ingress 控制器的情况Ingress 控制器的优势部署 Contour看到 Contour 在运行中总结推荐超级课程: Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战在处理Kubernetes时会遇到…

Java后端八股-------并发编程

图中的 synchronized方法如果没有锁&#xff0c;那么可能会有超卖&#xff0c;数据错误等情况。 加锁之后会按顺序售卖。 synchronized的底层是monitor。 线程没有竞争关系的时候&#xff0c;引入了轻量级锁&#xff0c;当需要处理竞争关系的时候一定要用到重量级锁(线程的…

数据挖掘与大数据的结合

随着大数据技术的不断发展和普及&#xff0c;数据挖掘在大数据环境下的应用也变得更加广泛和深入。以下将探讨大数据技术对数据挖掘的影响&#xff0c;以及如何利用大数据技术处理海量数据并进行有效的数据挖掘&#xff0c;同时分析大数据环境下的数据挖掘挑战和解决方案。 1.…

【Flutter】IOS运行工程二次启动崩溃问题。

问题 IOS14设备&#xff0c;切后台划掉&#xff0c;二次启动崩溃&#xff0c;看crash日志 一直提示第三方plugin注册问题。 一个一个尝试注掉&#xff0c;发现依然不行&#xff0c;创建了一个原生app&#xff0c;运行复现发现没问题&#xff0c;大概率是flutter的问题。 结论…

【RK32388 Android10, UNIK 4G模块导致usb hub出现 EMI】

文章目录 【RK32388 Android10&#xff0c; UNIK 4G模块导致usb hub出现 EMI 】背景调试过程解决相机掉线id变号发现EMI 出现 【RK32388 Android10&#xff0c; UNIK 4G模块导致usb hub出现 EMI 】 背景 在Android10 unik 的版本提测中&#xff0c;发现了一个问题&#xff0c…

Golang高效流控实践

流控对于构建高可靠弹性系统至关重要&#xff0c;本文介绍了Golang内置的流控组件&#xff0c;通过该组件就可以打造适合各种业务场景的流控系统。原文: Rate Limiting in Go: Controlling Traffic with Efficiency[1] Jon Cellier Unsplash 导言 流控(Rate limiting)是构建可扩…

Javaweb day17 day18 day19

mysql-DDL 数据库操作 写法 客户端工具 &#xff08;也可以使用idea&#xff09; 表 写法 约束 数据类型 案例 写法 表的查询修改删除 写法 删除

RTC的Google拥塞控制算法 rmcat-gcc-02

摘要 本文档描述了使用时的两种拥塞控制方法万维网&#xff08;RTCWEB&#xff09;上的实时通信&#xff1b;一种算法是基于延迟策略&#xff0c;一种算法是基于丢包策略。 1.简介 拥塞控制是所有共享网络的应用程序的要求互联网资源 [RFC2914]。 实时媒体的拥塞控制对于许…

Lua中文语言编程源码-第四节,更改linit.c初始化库函数, 使Lua加载中文库关键词(与所有的基础库相关)

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/CLua.git 在src文件夹下的linit.c初始化库的函数&#xff0c;用于lua.c和其他客户端。 增加加载中文库宏名列表&#xff0c;保留英文库宏名列表。 原始的代码为&#xff1a; static const …

​​SQLiteC/C++接口详细介绍之sqlite3类(十)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;九&#xff09; 下一篇&#xff1a;​​SQLiteC/C接口详细介绍之sqlite3类&#xff08;十一&#xff09; 30.sqlite3_enable_load_extension&#x…

venv uvicorn python 虚拟服务器外网无法访问

python -m venv .venv source ./.venv/bin/activate pip install -r requirements.txt ./run.sh source ./.venv/bin/activate uvicorn main:app --reload 虚拟web服务器外网访问控制台启动命令用以下代码启动 uvicorn main:app --host 0.0.0.0 --port 8501 --reload 启动到后…

生命周期模型

1. 编码修补模型&#xff08;Code-and-Fix Model&#xff09; 定义&#xff1a;这是一种非正式的软件开发过程&#xff0c;开发者开始编写代码&#xff0c;然后在发现问题时修复它们&#xff0c;没有明确的需求分析和设计阶段。特征&#xff1a; 开始编码而不进行大量的设计或…