日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
面試官：說(shuō)說(shuō)你在React項(xiàng)目是如何捕獲錯(cuò)誤的？

[[414977]]

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大邑縣免費(fèi)建站歡迎大家使用！

一、是什么

錯(cuò)誤在我們?nèi)粘＞帉懘a是非常常見(jiàn)的

舉個(gè)例子，在react項(xiàng)目中去編寫組件內(nèi)JavaScript代碼錯(cuò)誤會(huì)導(dǎo)致 React 的內(nèi)部狀態(tài)被破壞，導(dǎo)致整個(gè)應(yīng)用崩潰，這是不應(yīng)該出現(xiàn)的現(xiàn)象

作為一個(gè)框架，react也有自身對(duì)于錯(cuò)誤的處理的解決方案

二、如何做

為了解決出現(xiàn)的錯(cuò)誤導(dǎo)致整個(gè)應(yīng)用崩潰的問(wèn)題，react16引用了「錯(cuò)誤邊界」新的概念

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

錯(cuò)誤邊界在渲染期間、生命周期方法和整個(gè)組件樹(shù)的構(gòu)造函數(shù)中捕獲錯(cuò)誤

形成錯(cuò)誤邊界組件的兩個(gè)條件：

  • 使用了 static getDerivedStateFromError()
  • 使用了 componentDidCatch()

拋出錯(cuò)誤后，請(qǐng)使用 static getDerivedStateFromError() 渲染備用 UI ，使用 componentDidCatch() 打印錯(cuò)誤信息，如下：

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

然后就可以把自身組件的作為錯(cuò)誤邊界的子組件，如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.  
    4.

下面這些情況無(wú)法捕獲到異常：

  • 事件處理
  • 異步代碼
  • 服務(wù)端渲染
  • 自身拋出來(lái)的錯(cuò)誤

在react 16版本之后，會(huì)把渲染期間發(fā)生的所有錯(cuò)誤打印到控制臺(tái)

除了錯(cuò)誤信息和 JavaScript 棧外，React 16 還提供了組件棧追蹤?，F(xiàn)在你可以準(zhǔn)確地查看發(fā)生在組件樹(shù)內(nèi)的錯(cuò)誤信息：

可以看到在錯(cuò)誤信息下方文字中存在一個(gè)組件棧，便于我們追蹤錯(cuò)誤

對(duì)于錯(cuò)誤邊界無(wú)法捕獲的異常，如事件處理過(guò)程中發(fā)生問(wèn)題并不會(huì)捕獲到，是因?yàn)槠洳粫?huì)在渲染期間觸發(fā)，并不會(huì)導(dǎo)致渲染時(shí)候問(wèn)題

這種情況可以使用js的try...catch...語(yǔ)法，如下：

 
 
 
 
    
  
  
  
  
  1. class MyComponent extends React.Component { 
    2. 
  
  
  
  
  2.   constructor(props) { 
    3. 
  
  
  
  
  3.     super(props); 
    4. 
  
  
  
  
  4.     this.state = { error: null }; 
    5. 
  
  
  
  
  5.     this.handleClick = this.handleClick.bind(this); 
    6. 
  
  
  
  
  6.   } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.   handleClick() { 
    9. 
  
  
  
  
  9.     try { 
    10. 
  
  
  
  
  10.       // 執(zhí)行操作，如有錯(cuò)誤則會(huì)拋出 
    11. 
  
  
  
  
  11.     } catch (error) { 
    12. 
  
  
  
  
  12.       this.setState({ error }); 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14.   } 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.   render() { 
    17. 
  
  
  
  
  17.     if (this.state.error) { 
    18. 
  
  
  
  
  18.       return 
    Caught an error.
     
    19. 
  
  
  
  
  19.     } 
    20. 
  
  
  
  
  20.     return Click Me 
    21. 
  
  
  
  
  21.   } 
    22. 
  
  
  
  
  22. } 
    23.

除此之外還可以通過(guò)監(jiān)聽(tīng)onerror事件

 
 
 
 
    
  
  
  
  
  1. window.addEventListener('error', function(event) { ... }) 
    2.

參考文獻(xiàn)

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


當(dāng)前題目：面試官：說(shuō)說(shuō)你在React項(xiàng)目是如何捕獲錯(cuò)誤的？
網(wǎng)站地址：http://www.5511xx.com/article/dpdeddo.html