React错误边界Error Boundaries详解
更新时间：2022年12月03日 11:02:39 作者：码农小菲
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
错误边界（Error Boundaries）
概述
- 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。
- 是React组件,可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
- class组件中才可以使用
- 错误边界仅可以捕获其子组件的错误
错误边界无法捕获以下场景中的错误
- 事件处理
- 异步代码
- 服务端渲染
- 它自身抛出来的错误（并非它的子组件）
渲染备用UI-static getDerivedStateFromError()
在class组件中使用 static getDerivedStateFromError() 可以渲染备用 UI
static getDerivedStateFromError(error){
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true }
}
打印错误信息-componentDidCatch()
- 在class组件中使用 cpmponentDidCatch(err,errorInfo) 可以打印错误信息
- err：错误信息； errorInfo：它存储哪个组件引发了此错误的componentStack跟踪
componentDidCatch(error,errorInfo){
// 你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo)
}
打印错误信息并渲染备用UI
class ErrorBoundary extends React.Component {
constructor(props){
super(props)
this.state = { hasError: false} //是否报错
}
static getDeriveStateFromError(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;
}
}
可以将错误边界封装为一个组件进行使用
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
//项目中可以用于包裹在路由外面
<ErrorBoundary>
<Suspense fallback={<div >Loading...</div>}>
...
<MyWidget />
</Suspense>
</ErrorBoundary>
错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 的class 组件。
错误边界应该放置在哪？
可以选在最顶层的路由组件并为用户展示一个错误信息
未捕获错误（Uncaught Errors）的新行为
自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。
到此这篇关于React错误边界Error Boundaries详解的文章就介绍到这了,更多相关React错误边界内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了浅谈箭头函数写法在ReactJs中的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家介绍了Mobx 实现 React 应用的状态管理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
在大型Web应用中，一个常见的设计需求是让某些组件具有吸顶效果，这意味着当页面向下滚动时，该组件会保持在屏幕顶部，在本文中，我们将介绍如何在React项目中实现吸顶效果。我们将首先讨论使用原生JavaScript领域的方法来实现，然后将这些方法与React结合起来2023-06-06
前几天有人在问在useCallback函数如果第二个参数为空数组, 为什么拿不到最新的state值，那么这一章就来分析一下useCallback内部是如何实现的，感兴趣的小伙伴跟着小编一起来学习吧2023-07-07
这篇文章主要介绍了react-three-fiber实现3D粒子效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
React Native自定义Android的SSL证书链校验
这篇文章主要为大家介绍了React Native自定义Android的SSL证书链校验示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
这篇文章主要为大家详细介绍了react实现动态选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论