一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - React - React 錯誤邊界組件的處理

React 錯誤邊界組件的處理

2022-02-28 16:23xuxiaowei React

這篇文章主要介紹了React 錯誤邊界組件的處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

這是react16的內容，并不是最新的技術，但是用很少被討論，直到通過文檔發現其實也是很有用的一部分內容，還是總結一下～

react中的未捕獲的 js 錯誤會導致整個應用的崩潰，和整個組件樹的卸載。從 react16 開始就是這樣。但是同時react也引入了一個新的概念——錯誤邊界。

定義，是什么

錯誤邊界仍然是一種組件，可以捕獲（打印或者其他方式）處理該組件的子組件樹任何位置的 javascript 錯誤，并根據需要渲染出備用ui.

工作方式類似于try-catch，但是錯誤邊界只用于 react 組件。

只有class組件能夠成為錯誤邊界組件。錯誤邊界僅可以捕獲子組件的錯誤，無法捕獲自身的錯誤。

錯誤邊界會在渲染期間，生命周期和整個組件樹的構造函數中捕獲錯誤。如果沒有錯誤邊界處理，渲染的還是崩潰的子組件樹，這顯然不是我們想要的。

通過一個例子來逐步演示要怎么用錯誤邊界：

  1. export default class ErrorTest extends Component { 
  2.   constructor(props) { 
  3.     super(props); 
  4.   } 
  5.   render() { 
  6.     return ( 
  7.       <div> 
  8.         <BugCounter></BugCounter> 
  9.         <span>my name is dan</span> 
  10.       </div> 
  11.     ); 
  12.   } 
  13. } 
  14.  
  15. // Bug 報錯組件 
  16. class BugCounter extends Component { 
  17.   constructor(props) { 
  18.     super(props); 
  19.     this.state = { 
  20.       counter: 0, 
  21.     }; 
  22.   } 
  23.   click = () => { 
  24.     this.setState(({ counter }) => ({ counter: counter + 1 })); 
  25.   }; 
  26.   render() { 
  27.     if (this.state.counter === 5) { 
  28.       throw new Error("crashed!"); 
  29.     } 
  30.     return ( 
  31.       <div> 
  32.         <h3 onClick={this.click}>{this.state.counter}</h3> 
  33.       </div> 
  34.     ); 
  35.   } 
  36. } 

上面代碼的渲染結果（忽略樣式）：

React 錯誤邊界組件的處理

點擊數字0，會逐步遞增。但是數字等于5的時候，組件會拋出一個error:

React 錯誤邊界組件的處理

該error會引起整個demo的崩潰，連外部的<span>my name is dan</span>也顯示不出來了，這時還沒有添加錯誤邊界。

生產模式下，會直接白屏，并在控制臺報錯：

React 錯誤邊界組件的處理

getderivedstatefromerror & componentdidcatch

需要一個錯誤邊界來處理這種崩潰。如何定義一個錯誤邊界？

定義一個組件，并實現static getderivedstatefromerror() 或者componentdidcatch() 生命周期方法（可以都實現或者選擇其一）。這個組件就會變成一個錯誤邊界。

關于這兩個生命周期函數，可以通過鏈接查看，總結如下：

  1. componentDidCatch(error, info) 

error是拋出的錯誤對象，而info則包含了組件引發錯誤的棧信息。函數在提交階段被調用。是可以執行副作用的。

  1. static getDerivedStateFromError(error) 

在子組件拋出錯誤后調用，會將拋出的錯誤作為參數。需要返回一個值，以更新state。該函數在渲染階段調用，不允許出現副作用。如果在捕獲錯誤后需要執行副作用操作，應該在componentdidcatch中進行。

制作錯誤邊界組件

可以使用組合的方式，在要使用的組件上面添加一個錯誤邊界組件包裹一層。該組件需要這些效果：

  • 捕獲子組件錯誤，組件內部記錄出錯狀態
  • 在出錯狀態下顯示備用ui，在正常狀態下顯示子組件

那么就可以像這樣：

  1. class ErrorBoundary extends React.Component { 
  2.   constructor(props) { 
  3.     super(props); 
  4.     this.state = { hasError: false }; 
  5.   } 
  6.  
  7.   static getDerivedStateFromError(error) { 
  8.     // 更新 state 使下一次渲染能夠顯示降級后的 UI 
  9.     return { hasError: true }; 
  10.   } 
  11.  
  12.   componentDidCatch(error, errorInfo) { 
  13.     // 你同樣可以將錯誤日志上報給服務器 
  14.     logErrorToMyService(error, errorInfo); 
  15.   } 
  16.  
  17.   render() { 
  18.     if (this.state.hasError) { 
  19.       // 你可以自定義降級后的 UI 并渲染 
  20.       return <h1>Something went wrong.</h1>; 
  21.     } 
  22.  
  23.     return this.props.children;  
  24.   } 
  25. } 

捕獲到錯誤之后的副作用是自定義的，上傳服務器，或者用state記錄再顯示在頁面上：

  1. componentDidCatch(error, errorInfo) { 
  2.   // Catch errors in any components below and re-render with error message 
  3.   this.setState({ 
  4.     error: error, 
  5.     errorInfo: errorInfo 
  6.   }) 
  7. } 

捕獲處理

加上所有代碼，將有問題的組件用錯誤邊界的組件包裹起來，看看結果：

  1. import { Component } from "react"; 
  2.  
  3. export default class ErrorTest extends Component { 
  4.   render() { 
  5.     return ( 
  6.       <div> 
  7.         <ErrorBoundary> 
  8.           <BugCounter></BugCounter> 
  9.         </ErrorBoundary> 
  10.         <span>my name is dan</span> 
  11.       </div> 
  12.     ); 
  13.   } 
  14. } 
  15.  
  16. // Bug 報錯組件 
  17. class BugCounter extends Component { 
  18.   constructor(props) { 
  19.     super(props); 
  20.     this.state = { 
  21.       counter: 0, 
  22.     }; 
  23.   } 
  24.   click = () => { 
  25.     this.setState(({ counter }) => ({ counter: counter + 1 })); 
  26.   }; 
  27.   render() { 
  28.     if (this.state.counter === 5) { 
  29.       throw new Error("crashed!"); 
  30.     } 
  31.     return ( 
  32.       <div> 
  33.         <h3 onClick={this.click}>{this.state.counter}</h3> 
  34.       </div> 
  35.     ); 
  36.   } 
  37. } 
  38.  
  39. // 錯誤邊界處理組件 
  40. class ErrorBoundary extends Component { 
  41.   constructor(props) { 
  42.     super(props); 
  43.     this.state = { hasError: false }; 
  44.   } 
  45.  
  46.   static getDerivedStateFromError(error) { 
  47.     // 更新 state 使下一次渲染能夠顯示降級后的 UI 
  48.     return { hasError: true }; 
  49.   } 
  50.  
  51.   render() { 
  52.     if (this.state.hasError) { 
  53.       // 你可以自定義降級后的 UI 并渲染 
  54.       return <h1>Something went wrong.</h1>; 
  55.     } 
  56.  
  57.     return this.props.children; 
  58.   } 
  59. } 

拋出異常在開發模式下依然是報錯的，但是在使用yarn build之后，再通過http-server掛起來之后，訪問生產的頁面：

React 錯誤邊界組件的處理

可以看到，雖然因為throw error控制臺出錯，但是my name is dan的顯示并沒有被影響，也就是說，錯誤邊界內部的子組件錯誤沒有影響到外部其他組件和元素。

作用范圍

錯誤邊界用于處理子組件生命周期和渲染函數上的錯誤，對于事件處理器，不會在渲染期間觸發，對于事件處理器拋出的異常應該用try catch。

錯誤邊界無法捕獲這些場景中的錯誤：

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

關于錯誤邊界，一個 react的官方demo值得嘗試：

https://codepen.io/gaearon/pen/wqvxga?editors=0010

參考：

https://zh-hans.reactjs.org/docs/error-boundaries.html

https://zh-hans.reactjs.org/docs/react-component.html

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

到此這篇關于react 錯誤邊界組件的處理的文章就介紹到這了,更多相關react 錯誤邊界內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://www.cnblogs.com/xuxiaowei/p/14645136.html

延伸 · 閱讀

精彩推薦
  • React使用hooks寫React組件需要注意的5個地方

    使用hooks寫React組件需要注意的5個地方

    這篇文章主要介紹了使用hooks寫React組件需要注意的5個地方，幫助大家更好的理解和學習使用React組件，感興趣的朋友可以了解下...

    forrest醬8702022-02-24
  • React詳解對于React結合Antd的Form組件實現登錄功能

    詳解對于React結合Antd的Form組件實現登錄功能

    這篇文章主要介紹了詳解對于React結合Antd的Form組件實現登錄功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需...

    浮生離夢6542022-02-23
  • React淺談react路由傳參的幾種方式

    淺談react路由傳參的幾種方式

    這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下...

    glorydx4582022-02-20
  • React一看就懂的ReactJs基礎入門教程-精華版

    一看就懂的ReactJs基礎入門教程-精華版

    現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發深深的吸引了我，下面來跟我一起領略...

    雲霏霏9262022-02-22
  • React詳解react setState

    詳解react setState

    這篇文章主要介紹了react setState的相關資料，幫助大家更好的理解和學習使用react，感興趣的朋友可以了解下...

    一個前端王4942022-02-27
  • ReactReact+Ant Design開發環境搭建的實現步驟

    React+Ant Design開發環境搭建的實現步驟

    這篇文章主要介紹了React+Ant Design開發環境搭建的實現步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋...

    qq_3341488311802022-02-24
  • React詳解react應用中的DOM DIFF算法

    詳解react應用中的DOM DIFF算法

    這篇文章主要介紹了react應用中的DOM DIFF算法，幫助大家更好的理解和學習使用react，感興趣的朋友可以了解下...

    time_w6232022-02-25
  • Reactreact hooks入門詳細教程

    react hooks入門詳細教程

    這篇文章主要介紹了react hooks入門詳細教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考...

    抱素_6832022-02-23
主站蜘蛛池模板： 国产成人精选免费视频 | 欧美丰满大乳大屁在线观看股 | 51国产| 国产精品www视频免费看 | 91porn最新网址 | 免费在线观看小视频 | 向日葵视频app下载18岁以下勿看 | 99在线免费观看视频 | 亚洲国产精品无码中文字满 | hh99me福利毛片| 欧美高清无砖专区欧美精品 | bdsm中国精品调教 | 男女18一级大黄毛片免 | 51国产午夜精品免费视频 | 色哟哟哟 | 91大神第九部红酒气质女 | 99精品国产久热在线观看66 | 日本欧美不卡一区二区三区在线 | 免费亚洲成人 | 车上小婕子系列辣文小说 | 69热精品视频在线看影院 | 日韩成a人片在线观看日本 日韩不卡一区二区 | 美女被爆 | 第一福利在线导航 | 动漫美女人物被黄漫小说 | 短篇小说肉 | 色综合天天综合网看在线影院 | 国产chinese男男gaygay | 亚洲福利视频在线观看 | bb18lv黑料正能量 | www.麻豆| 欧美大b| 天堂久久久久va久久久久 | 亚洲AV福利天堂一区二区三 | 91免费播放人人爽人人快乐 | 免费在线看片网站 | 国产美女做爰免费视频网址 | 欧美日韩国产中文字幕 | 日本天堂影院在线播放 | 成人在线观看视频免费 | 我的奶头被客人吸的又肿又红 |