React错误边界Error Boundaries详解

目录

• 错误边界（Error Boundaries）
• 概述
• 错误边界无法捕获以下场景中的错误
• 渲染备用UI-static getDerivedStateFromError()
• 打印错误信息-componentDidCatch()
• 打印错误信息并渲染备用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错误边界内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！