日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React錯誤邊界Error?Boundaries詳解_React

作者：碼農小菲 ? 更新時間： 2022-12-30 編程語言

錯誤邊界（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 組件樹被卸載。

原文鏈接：https://blog.csdn.net/xbczrz/article/details/128079580

欄目分類
最近更新