这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下~

React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载。从 React16 开始就是这样。但是同时React也引入了一个新的概念——错误边界。

定义,是什么

错误边界仍然是一种组件,可以捕获(打印或者其他方式)处理该组件的子组件树任何位置的 JavaScript 错误,并根据需要渲染出备用UI.

工作方式类似于try-catch,但是错误边界只用于 React 组件。

只有class组件能够成为错误边界组件。错误边界仅可以捕获子组件的错误,无法捕获自身的错误

错误边界会在渲染期间,生命周期和整个组件树的构造函数中捕获错误。如果没有错误边界处理,渲染的还是崩溃的子组件树,这显然不是我们想要的。

通过一个例子来逐步演示要怎么用错误边界:

export default class ErrorTest extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<BugCounter></BugCounter>
<span>my name is dan</span>
</div>
);
}
} // Bug 报错组件
class BugCounter extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
click = () => {
this.setState(({ counter }) => ({ counter: counter + 1 }));
};
render() {
if (this.state.counter === 5) {
throw new Error("crashed!");
}
return (
<div>
<h3 onClick={this.click}>{this.state.counter}</h3>
</div>
);
}
}

上面代码的渲染结果(忽略样式):

点击数字0,会逐步递增。但是数字等于5的时候,组件会抛出一个Error:

Error会引起整个Demo的崩溃,连外部的<span>my name is dan</span>也显示不出来了,这时还没有添加错误边界。

生产模式下,会直接白屏,并在控制台报错:

getDerivedStateFromError & componentDidCatch

需要一个错误边界来处理这种崩溃。如何定义一个错误边界?

定义一个组件,并实现static getDerivedStateFromError() 或者componentDidCatch() 生命周期方法(可以都实现或者选择其一)。这个组件就会变成一个错误边界

关于这两个生命周期函数,可以通过链接查看,总结如下:

componentDidCatch(error, info)

error是抛出的错误对象,而info则包含了组件引发错误的栈信息。函数在提交阶段被调用。是可以执行副作用的。

static getDerivedStateFromError(error)

在子组件抛出错误后调用,会将抛出的错误作为参数。需要返回一个值,以更新state。该函数在渲染阶段调用,不允许出现副作用。如果在捕获错误后需要执行副作用操作,应该在componentDidCatch中进行。

制作错误边界组件

可以使用组合的方式,在要使用的组件上面添加一个错误边界组件包裹一层。该组件需要这些效果:

  • 捕获子组件错误,组件内部记录出错状态
  • 在出错状态下显示备用UI,在正常状态下显示子组件

那么就可以像这样:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
} static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
} componentDidCatch(error, errorInfo) {
// 你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo);
} render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return <h1>Something went wrong.</h1>;
} return this.props.children;
}
}

捕获到错误之后的副作用是自定义的,上传服务器,或者用state记录再显示在页面上:

componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo
})
}

捕获处理

加上所有代码,将有问题的组件用错误边界的组件包裹起来,看看结果:

import { Component } from "react";

export default class ErrorTest extends Component {
render() {
return (
<div>
<ErrorBoundary>
<BugCounter></BugCounter>
</ErrorBoundary>
<span>my name is dan</span>
</div>
);
}
} // Bug 报错组件
class BugCounter extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
click = () => {
this.setState(({ counter }) => ({ counter: counter + 1 }));
};
render() {
if (this.state.counter === 5) {
throw new Error("crashed!");
}
return (
<div>
<h3 onClick={this.click}>{this.state.counter}</h3>
</div>
);
}
} // 错误边界处理组件
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
} static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
} render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return <h1>Something went wrong.</h1>;
} return this.props.children;
}
}

抛出异常在开发模式下依然是报错的,但是在使用yarn build之后,再通过http-server挂起来之后,访问生产的页面:

可以看到,虽然因为throw error控制台出错,但是my name is dan的显示并没有被影响,也就是说,错误边界内部的子组件错误没有影响到外部其他组件和元素。

作用范围

错误边界用于处理子组件生命周期和渲染函数上的错误,对于事件处理器,不会在渲染期间触发,对于事件处理器抛出的异常应该用try catch

错误边界无法捕获这些场景中的错误:

  • 事件处理
  • 异步代码
  • 服务端渲染
  • 错误边界自身抛出的错误(非子组件)

关于错误边界,一个 React的官方demo值得尝试:

https://codepen.io/gaearon/pen/wqvxGa?editors=0010


参考:

React 错误边界组件的更多相关文章

  1. Error Boundaries 错误边界

    错误边界是用于捕获其子组件树 JavaScript 异常,记录错误并展示一个回退的 UI 的 React 组件,而不是整个组件树的异常.错误边界在渲染期间.生命周期方法内.以及整个组件树构造函数内捕获 ...

  2. 关于react16.4——错误边界

    过去,组件内的 JavaScript 错误常常会破坏 React 内部状态,并导致它在下一次渲染时产生神秘的错误.这些错误总会在应用代码中较早的错误引发的,但 React 并没有提供一种方式能够在组件 ...

  3. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  4. React技巧之组件中返回多个元素

    原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements 作者:Borislav Hadzhiev 正文从这开始~ fragment ...

  5. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  7. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  8. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

随机推荐

  1. c++ 去掉字符串首尾空格

    http://www.cplusplus.com/reference/regex/regex_replace/ #include <iostream> #include <regex ...

  2. 「NGK每日快讯」12.11日NGK公链第38期官方快讯!

  3. Markdown简单语法的使用

    Markdown简单语法的使用 目录 Markdown简单语法的使用 前言 标题的设置 字体的设置 1.字体加粗 2.斜体 3.字体加粗斜体 3.删除线 引用 列表的使用 插入图片 分割线 代码的书写 ...

  4. 2021 年学习 React 的所需要的 JavaScript 基础

    在理想的情况中,您可以先了解所有有关 JavaScript 和 web 开发的知识,然后再深入了解React. 但是,我们没有办法这样,如果等你把所有 JavaScript 的知识都掌握了再去学习 R ...

  5. 【不在混淆的C】指针函数、函数指针、回调函数

    一.指针函数 函数的返回值是指针类型. int* fun(int a,int b); 指针函数使用: 返回字符串 这里要注意,"1234567890abc"是字符串常量,*p指向的 ...

  6. 顶级c程序员之路 基础篇 - 第一章 关键字的深度理解 number-1

    c语言有32个关键字,每个关键字你都理解吗? 今天出场的是: auto ,  register,  static,   extern 为什么他们会一起呢,说到这里不得不谈到c语言对变量的描述. c给每 ...

  7. entitybuilder--一个简单的业务通用框架

    关于业务通用框架的思考 业务系统是千差万别的,例如,保存.更新和删除订单,或者保存订单和保存客户,走的根本不是一个流程.但是,它们还是有共同点,它们的流程大致可以分成下面的几个部分: 拿到增删改等操作 ...

  8. 操作系统---IO权限管理和敏感指令

    简化版 使用IOPL设置一个特权级的用户程序对所有端口的访问权限,使用I/O位图对一个特权级的用户程序设置个性化的端口访问权限(能访问部分端口.不能访问另外的端口). 用户程序的CPL<IOPL ...

  9. Spring Security 整合 微信小程序登录的思路探讨

    1. 前言 原本打算把Spring Security中OAuth 2.0的机制讲完后,用小程序登录来实战一下,发现小程序登录流程和Spring Security中OAuth 2.0登录的流程有点不一样 ...

  10. javaweb遇到的报错及解决方式

    javaweb报错问题以及解决方案 问题(报错信息):Application Server was not connected before run configuration stop, reaso ...