React錯(cuò)誤邊界Error Boundaries詳解

更新時(shí)間：2022年12月03日 11:02:39 作者：碼農(nóng)小菲

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

錯(cuò)誤邊界（Error Boundaries）

概述

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

錯(cuò)誤邊界無法捕獲以下場景中的錯(cuò)誤

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

渲染備用UI-static getDerivedStateFromError()

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

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

打印錯(cuò)誤信息-componentDidCatch()

在class組件中使用 cpmponentDidCatch(err,errorInfo) 可以打印錯(cuò)誤信息
err：錯(cuò)誤信息； errorInfo：它存儲哪個(gè)組件引發(fā)了此錯(cuò)誤的componentStack跟蹤

componentDidCatch(error,errorInfo){
  // 你同樣可以將錯(cuò)誤日志上報(bào)給服務(wù)器
  logErrorToMyService(error, errorInfo)
}

打印錯(cuò)誤信息并渲染備用UI

class ErrorBoundary extends React.Component {
 constructor(props){
  super(props)
  this.state = { hasError: false} //是否報(bào)錯(cuò)
 }
 static getDeriveStateFromError(error){
   // 更新 state 使下一次渲染能夠顯示降級后的 UI
    return { hasError: true }
 }
 componentDidCatch(error,errorInfo){
  // 你同樣可以將錯(cuò)誤日志上報(bào)給服務(wù)器
  logErrorToMyService(error, errorInfo)
 }
 render(){
   if(this.state.hasError){
     // 自定義降級后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
   }
   return this.props.children; 
 }
}

可以將錯(cuò)誤邊界封裝為一個(gè)組件進(jìn)行使用

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
//項(xiàng)目中可以用于包裹在路由外面
 <ErrorBoundary>
  <Suspense fallback={<div >Loading...</div>}>
    ...
    <MyWidget />
  </Suspense>
</ErrorBoundary>

錯(cuò)誤邊界的工作方式類似于 JavaScript 的 catch {}，不同的地方在于錯(cuò)誤邊界只針對 React 的class 組件。

錯(cuò)誤邊界應(yīng)該放置在哪？

可以選在最頂層的路由組件并為用戶展示一個(gè)錯(cuò)誤信息

未捕獲錯(cuò)誤（Uncaught Errors）的新行為

自 React 16 起，任何未被錯(cuò)誤邊界捕獲的錯(cuò)誤將會導(dǎo)致整個(gè) React 組件樹被卸載。

到此這篇關(guān)于React錯(cuò)誤邊界Error Boundaries詳解的文章就介紹到這了,更多相關(guān)React錯(cuò)誤邊界內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: