React 高级应用 -- 错误边界 Error Boundaries

GitHub 学习 Demo。

部分 UI 的异常不应该破坏了整个应用。为了解决 React 用户的这一问题，React 16 引入了一种称为 “错误边界” 的新概念。

错误边界的作用在于捕获其子组件树 JavaScript 异常，记录错误并展示替补的自定义 React 组件。

错误边界组件的实现

让一个类组件变成一个错误边界，只需实现生命周期方法 static getDerivedStateFromError()或者componentDidCatch()中的任意一个或两个。

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}/*** 当捕捉到错误时，使得在更新视图之前有机会更新 state* @param error 具体的 JavaScript 异常**static getDerivedStateFromError(error) {// 当捕捉到错误的时候，返回跟新 this.statereturn { hasError: true };}/*** 错误被捕捉完成。* @param error 具体的 JavaScript 异常* @param info 一个记录着错误信息是从哪个组件里抛出来的对象。里面包含一些关键的信息。**componentDidCatch(error, info) {// 可以在这里记录组件的错误信息logErrorToMyService(error, info);}render() {if (this.state.hasError) {// 当错误发生时 显示这部分内容return <h1>Something went wrong.</h1>;}return this.props.children; }
}# 而后你可以像一个普通的组件一样使用：<ErrorBoundary><MyWidget />
</ErrorBoundary>
复制代码

错误边界无法捕获如下错误:

事件处理
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
错误边界自身抛出来的错误（而不是其子组件）

错误边界的最小单位是组件

这里的错误边界内的内容不会别替换。错误会冒泡至黎其最近的父组件。

<header><h2>Header</h2><ErrorBoundary><nav>{ a[0].asd.dawd }<a>Home</a><a>Part1</a><a>Part2</a><a>Part3</a></nav></ErrorBoundary><hr/>
</header>
复制代码

转载于:https://juejin.im/post/5ca0c7f4f265da307d44893a

React 高级应用 -- 错误边界 Error Boundaries相关推荐

react跳转到网络异常页面_React错误边界处理
最近在项目编写过程中发现经常会因为接口问题抛出各种各的错误,有的时候页面甚至会直接白屏,非常影响用户体验.为此,我仔细研究了一下React处理异常的方案,下面我将开始我的分享. 错误边界的作用前端异 ...
reactjs错误边界：用来捕获后代组件的错误，渲染出备用页面
8. 错误边界理解: 错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面特点: 只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件.定时 ...
React入门（3）-- React的错误边界（Error Boundaries）
熟悉React都知道,在React中一些UI的错误,比如throw new Error(),加载服务器资源报错时,或者一些js的语法错误可能会导致整个项目崩溃掉,满屏的红色报错,非常不友好.为了解决这 ...
react 错误边界_React with GraphQL和错误边界中的自定义错误页面
react 错误边界 by Abi Noda 通过Abi Noda React with GraphQL和错误边界中的自定义错误页面 (Custom error pages in React with ...
[react] 说说你对Error Boundaries的理解
[react] 说说你对Error Boundaries的理解错误边界是React16新推出的一种错误处理的方式,在v16之前,React的抛错会导致页面显示的错误,v16修改这种方式成了组件如果产 ...
react 错误边界_如何在React 16中使用错误边界
react 错误边界 Have you seen these in your console? 您是否在控制台中看到了这些? Cannot read property 'getHostNode'of ...
React Portals与Error Boundaries
Portals 在React 16.x 新增了一个名为"Protals"的特性,直接按照字面意思翻译实在不靠谱.在描述这个特性时,我们还是用官方的英文单词来指定它.Portals的 ...
[react] React v15中怎么处理错误边界？
[react] React v15中怎么处理错误边界? React 15 中有一个支持有限的错误边界方法 unstable_handleError.此方法不再起作用,同时自 React 16 beta ...
16 代码分割之错误边界与Suspense和命名导出
代码分割之错误边界与Suspense const Main = React.lazy(() => import('./main')) class ErrorBoundary extends Re ...

React 高级应用 -- 错误边界 Error Boundaries

错误边界组件的实现

错误边界无法捕获如下错误:

错误边界的最小单位是组件

React 高级应用 -- 错误边界 Error Boundaries相关推荐

最新文章

热门文章