React錯誤邊界Error Boundaries詳解

更新時間：2022年12月03日 11:02:39 作者：碼農小菲

錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹

錯誤邊界（Error Boundaries）

概述

部分 UI 的 JavaScript 錯誤不應該導致整個應用崩潰，為了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界。
是React組件,可以捕獲并打印發(fā)生在其子組件樹任何位置的 JavaScript 錯誤，并且，它會渲染出備用 UI。錯誤邊界在渲染期間、生命周期方法和整個組件樹的構造函數(shù)中捕獲錯誤。
class組件中才可以使用
錯誤邊界僅可以捕獲其子組件的錯誤

錯誤邊界無法捕獲以下場景中的錯誤

事件處理
異步代碼
服務端渲染
它自身拋出來的錯誤（并非它的子組件）

渲染備用UI-static getDerivedStateFromError()

在class組件中使用 static getDerivedStateFromError() 可以渲染備用 UI

static getDerivedStateFromError(error){
   // 更新 state 使下一次渲染能夠顯示降級后的 UI
    return { hasError: true }
}

打印錯誤信息-componentDidCatch()

在class組件中使用 cpmponentDidCatch(err,errorInfo) 可以打印錯誤信息
err：錯誤信息； errorInfo：它存儲哪個組件引發(fā)了此錯誤的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錯誤邊界內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: