React@16.x(18)错误边界

目录

  • 1,什么是错误边界
  • 2,捕获子组件的错误
    • 2.1,static getDerivedStateFromError
      • 2.1.1,特点
      • 2.1.2,举例
    • 2.2,componentDidCatch
      • 2.2.1,特点
      • 2.2.2,举例
  • 3,错误边界组件无法捕获的错误
    • 3.1,自身的错误
    • 3.2,异步的错误
    • 3.3,事件中的错误

1,什么是错误边界

默认情况下,如果一个组件在**渲染期间(render)**发生错误,会导致整个组件树被全部卸载。

全部卸载:指整个应用都被卸载,<div id="root"></div> 没有子元素了。
一般此时 React 会在控制台打印错误消息。

举例:

import React, { PureComponent } from "react";function ChildA() {return (<><h1>childA</h1><ChildB></ChildB></>);
}function ChildB() {const obj = {};console.log(obj.a.b);return <h1>childB</h1>;
}function ChildC() {return <h1>childC</h1>;
}export default class App extends PureComponent {render() {return (<><ChildA /><ChildC /></>);}
}

错误边界

指的是一个自定义的组件,它可以捕获子组件在渲染期间发生的错误,并有能力阻止继续往上传播。

2,捕获子组件的错误

可以通过2个生命周期函数来捕获。

2.1,static getDerivedStateFromError

2.1.1,特点

1,它是一个静态函数

2,运行时间点:渲染子组件的过程中,发生错误之后,更新页面之前。

3,该函数返回一个对象, React 会用该对象的属性覆盖掉当前组件的 state

不能使用 this.setState(),是因为它是静态函数。

4,通常,该函数用于改变状态。

也就是说,通过改变状态:选择不渲染出错的子组件,而是渲染指定的内容。

2.1.2,举例

新增一个组件

import React, { Component } from "react";export default class ErroBound extends Component {state = {hasError: false,};static getDerivedStateFromError(error) {return {hasError: true,};}render() {if (this.state.hasError) {return <div>错误了</div>;}return this.props.children;}
}

修改上面的例子:

export default class App extends PureComponent {render() {return (<><ErroBound><ChildA></ChildA></ErroBound><ChildC></ChildC></>);}
}

这样就可以捕获到报错的组件,不影响组件 ChildC 的正常渲染了。

2.2,componentDidCatch

2.2.1,特点

1,实例的方法。

2,运行时间点:渲染子组件的过程中,发生错误更新页面之后。因为时间点靠后,所以不太会在该函数中改变状态(虽然这样使用没有问题。)

3,通常用于记录错误日志进行上报。

2.2.2,举例

// 其他代码不变。
export default class ErroBound extends Component {// error 是错误对象。// info 是一个多层级的对象,标记报错在哪个组件了。componentDidCatch(error, info) {this.setState({hasError: true,});}
}

3,错误边界组件无法捕获的错误

3.1,自身的错误

3.2,异步的错误

比如,将 ChildB 组件做如下更改,初次渲染没有问题。1s 之后就会报错。

function ChildB() {setTimeout(() => {const obj = {};console.log(obj.a.b);}, 1000);return <h1>childB</h1>;
}

3.3,事件中的错误

比如,将 ChildB 组件做如下更改,初次渲染没有问题。点击就会报错。

function ChildB() {return (<h1onClick={() => {const obj = {};console.log(obj.a.b);}}>childB</h1>);
}

因为这2个生命周期函数,仅会在首次渲染子组件期间执行,所以异步的错误就捕获不到了。

一句话总结:仅处理子组件渲染期间的同步错误


以上。

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

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

相关文章

冯喜运:6.3黄金原油晚间最新行情及独家操作策略指导

【黄金消息面分析】&#xff1a;在全球经济的波动和不确定性中&#xff0c;黄金作为传统的避险资产&#xff0c;其价格走势和市场分析一直是投资者关注的焦点。本周一&#xff08;北京时间6月3日&#xff09;&#xff0c;现货黄金价格基本持平&#xff0c;交易商正在等待本周公…

一个AI板卡电脑--香橙派 AIpro

本文算是一个开箱测评&#xff0c;主要评估它和一个电脑的距离。 香橙派官网&#xff1a;香橙派(Orange Pi)-Orange Pi官网-香橙派开发板,开源硬件,开源软件,开源芯片,电脑键盘香橙派&#xff08;Orange Pi&#xff09;是深圳市迅龙软件有限公司旗下开源产品品牌;香橙派&#x…

c#控件笔记

c# PictureBox在工具箱的哪个位置 在 Visual Studio 的工具箱中&#xff0c;PictureBox 控件位于 “Common Controls” 部分。要找到 PictureBox&#xff0c;请按照以下步骤操作&#xff1a; 打开 Visual Studio 并加载您的项目。确保已经打开了设计器视图&#xff08;即您的…

如何进行代码审查和测试的

虽然我不能直接进行代码审查和测试&#xff0c;但我可以描述一种典型的代码审查和测试流程&#xff0c;这些流程通常由软件开发团队遵循&#xff1a; 代码审查&#xff1a; 准备阶段&#xff1a; 确定要审查的代码范围&#xff08;例如&#xff0c;一个功能、一个模块或整个项…

Oracle数据库面试题-1

1. 请简述Oracle数据库的基本架构。 Oracle数据库的基本架构可以分为以下几个主要组成部分&#xff1a; 1. 内存结构 Oracle数据库的主要内存区域包括&#xff1a; 共享池&#xff08;Shared Pool&#xff09;&#xff1a;包含了数据库的系统全局缓冲区、库缓冲区、数据字典…

抖音小店怎么找厂家代发?从沟通到发货,全流程不容错过!

哈喽~ 我是电商月月 新手做抖音小店&#xff0c;无货源模式的商家不知道怎么找货源&#xff1f; 今天月月就给大家讲解一下抖音小店从找厂家&#xff0c;到和厂家沟通&#xff0c;最后协商发货的方法步骤都有哪些&#xff1f; 满满干货&#xff0c;不容错过&#xff0c;建议…

游戏找不到d3dcompiler43.dll怎么办,分享5种有效的解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是找不到某个文件。其中&#xff0c;找不到d3dcompiler43.dll是一个常见的问题。这个问题通常出现在运行某些游戏或应用程序时&#xff0c;由于缺少了d3dcompiler43.dll文件&#xff0c;导致程…

openeuler欧拉系统连不上网,ping百度报错,ping: www.baidu.com: Name or service not known

一、现象 使用华为 openeuler 系统连不上网&#xff0c;ping 百度报如下错误 ↓ ping: www.baidu.com: Name or service not known二、原因 没有配置dns服务器 三、解决办法 进入网络配置文件存放文件夹 cd /etc/sysconfig/network-scripts/查看对应的网口文件 ls ps: 不同系…

C语言:(动态内存管理)

目录 动态内存有什么用呢 malloc函数 开辟失败示范 free函数 calloc函数 realloc函数 当然realooc也可以开辟空间 常⻅的动态内存的错误 对NULL指针的解引⽤操作 对动态内存开辟的空间越界访问 对⾮动态开辟内存使⽤free释放 使⽤free释放⼀块动态开辟内存的⼀部分 …

TCP三次握手四次挥手,滑动窗口

TCP三次握手 TCP&#xff08;传输控制协议&#xff09;是一种重要的网络协议&#xff0c;它属于互联网协议套件中的传输层&#xff0c;主要用于在不可靠的互联网上提供可靠的、有序的和无差错的数据传输。下面详细介绍TCP的工作原理&#xff0c;包括其连接建立的三次握手过程。…

类和对象(下)【初始化列表】【static成员】【友元】等..... .及【练习题】

类和对象&#xff08;下&#xff09; 1.再谈构造函数 1.1构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值。 // 初始化列表 # include<iostream> using namespace std;class Date { public:// 构造…

机器学习第十一次课

前言 从现在开始进入神经网络的领域了 正文 先是一段历史介绍,这个就跳过吧,我觉得这里最重要的就是反向传播这里 反向传播 反向传播&#xff08;Backpropagation&#xff09;是一种训练人工神经网络的算法&#xff0c;它通过计算损失函数关于网络参数的梯度来调整网络参数…

【Spring Boot 】JPA 的基本使用

1.JPA描述 JPA&#xff08;Java Persistence API&#xff09;是一种Java编程接口&#xff0c;用于简化Java应用程序与数据库之间的交互。它提供了一种标准的持久化方式&#xff0c;可以将Java对象映射到关系型数据库表中&#xff0c;实现对象和数据库之间的转换。通过JPA&…

使用Micronaut框架优化Java微服务架构

引言&#xff1a; 在微服务架构领域&#xff0c;开发者经常面临性能和内存使用效率的挑战。Micronaut框架通过提供快速启动时间和极低的内存占用&#xff0c;成为解决这些挑战的有力工具。此外&#xff0c;Micronaut还提供了依赖注入和面向切面编程的支持&#xff0c;无需依赖…

【算法实战】每日一题:17.1 订单处理问题(差分思想,二分搜索)

题目 一个会议中心的场地预订系统。在接下来的 n 天里&#xff0c;会议中心有一定数量的会议室可供租用。共有 m 份预订请求&#xff0c;每份请求描述为 (d_i, a_i, b_i)&#xff0c;表示需要从第 a_i 天到第 b_i 天使用会议室&#xff08;包括第 a_i 天和第 b_i 天&#xff0…

【C语言】动态内存管理技术文档

【C语言】动态内存管理技术文档 目录 【C语言】动态内存管理技术文档 一、内存管理基础

java基础篇(1)

JDK是什么?有哪些内容组成?JDK是Java开发工具包 JVM虚拟机: Java程序运行的地方 核心类库: Java已经写好的东西&#xff0c;我们可以直接用开发工具: javac、java、jdb、jhat.. JRE是什么?有哪些内容组成? JRE是Java运行环境 JVM、核心类库、运行工具 JDK&#xff0c;JRE&…

【JavaScript脚本宇宙】融合艺术与科技:揭秘JavaScript绘图与图像处理库

图像处理新视界&#xff1a;六种库重塑你的JavaScript开发体验 前言 在这个科技日新月异的时代&#xff0c;图像处理和绘图库已成为开发者必备的工具。本文将讨论六种高效、强大且易用的JavaScript库&#xff0c;它们可以大大提升我们在处理图像和绘图方面的效率。 欢迎订阅专…

Vulnhub项目:HACKSUDO: THOR

1、靶机地址 hacksudo: Thor ~ VulnHubhacksudo: Thor, made by Vishal Waghmare. Download & walkthrough links are available.https://vulnhub.com/entry/hacksudo-thor,733/ 2、渗透过程 来了来了&#xff0c;开搞&#xff0c;先看目标 56.161&#xff0c;本机 56.1…

WebGL开发电力数字孪生

WebGL 开发电力数字孪生是一项复杂但极具潜力的任务。电力数字孪生通过创建电力系统的虚拟模型&#xff0c;可以实时监控、分析和优化电力系统的运行状态。以下是开发电力数字孪生的详细步骤。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流…