這篇文章主要介紹React16中異常處理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),長子網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:長子等地區(qū)。長子做網(wǎng)站價格咨詢:028-86922220

異常處理

在 React 15.x 及之前的版本中，組件內(nèi)的異常有可能會影響到 React 的內(nèi)部狀態(tài)，進(jìn)而導(dǎo)致下一輪渲染時出現(xiàn)未知錯誤。這些組件內(nèi)的異常往往也是由應(yīng)用代碼本身拋出，在之前版本的 React 更多的是交托給了開發(fā)者處理，而沒有提供較好地組件內(nèi)優(yōu)雅處理這些異常的方式。在 React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發(fā)生在 UI 層的錯誤不會連鎖導(dǎo)致整個應(yīng)用程序崩潰；未被任何異常邊界捕獲的異常可能會導(dǎo)致整個 React 組件樹被卸載。所謂的異常邊界即指某個能夠捕獲它的子元素（包括嵌套子元素等）拋出的異常，并且根據(jù)用戶配置進(jìn)行優(yōu)雅降級地顯示而不是導(dǎo)致整個組件樹崩潰。異常邊界能夠捕獲渲染函數(shù)、生命周期回調(diào)以及整個組件樹的構(gòu)造函數(shù)中拋出的異常。

我們可以通過為某個組件添加新的 componentDidCatch(error, info) 生命周期回調(diào)來使其變?yōu)楫惓＿吔纾?/p>

class ErrorBoundary extends React.Component {
 constructor(props) {
super(props);
this.state = { hasError: false };
 }

 componentDidCatch(error, info) {
  // Display fallback UI
this.setState({ hasError: true });
  // You can also log the error to an error reporting service
  logErrorToMyService(error, info);
 }

 render() {
if (this.state.hasError) {
   // You can render any custom fallback UI
return 
Something went wrong.
;
  }
return this.props.children;
 }
}

然后我們就可以如常使用該組件：

componentDidCatch() 方法就好像針對組件的 catch {} 代碼塊；不過 JavaScript 中的 try/catch 模式更多的是面向命令式代碼，而 React 組件本身是聲明式模式，因此更適合采用指定渲染對象的模式。需要注意的是僅有類組件可以成為異常邊界，在真實(shí)的應(yīng)與開發(fā)中我們往往會聲明單個異常邊界然后在所有可能拋出異常的組件中使用它。另外值得一提的是異常邊界并不能捕獲其本身的異常，如果異常邊界組件本身拋出了異常，那么會冒泡傳遞到上一層最近的異常邊界中。

在真實(shí)地應(yīng)用開發(fā)中有的開發(fā)者也會將崩壞的界面直接展示給開發(fā)者，不過譬如在某個聊天界面中，如果在出現(xiàn)異常的情況下仍然直接將界面展示給用戶，就有可能導(dǎo)致用戶將信息發(fā)送給錯誤的接受者；或者在某些支付應(yīng)用中導(dǎo)致用戶金額顯示錯誤。因此如果我們將應(yīng)用升級到 React 16.x，我們需要將原本應(yīng)用中沒有被處理地異常統(tǒng)一包裹進(jìn)異常邊界中。譬如某個應(yīng)用中可能會分為側(cè)邊欄、信息面板、會話界面、信息輸入等幾個不同的模塊，我們可以將這些模塊包裹進(jìn)不同的錯誤邊界中；這樣如果某個組件發(fā)生崩潰，會被其直屬的異常邊界捕獲，從而保證剩余的部分依然處于可用狀態(tài)。同樣的我們也可以在異常邊界中添加錯誤反饋等服務(wù)接口以及時反饋生產(chǎn)環(huán)境下的異常并且修復(fù)他們。完整的應(yīng)用代碼如下所示：

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
 }

 componentDidCatch(error, errorInfo) {
  // Catch errors in any components below and re-render with error message
this.setState({
   error: error,
   errorInfo: errorInfo
  })
  // You can also log error messages to an error reporting service here
 }

 render() {
if (this.state.errorInfo) {
   // Error path
return (
    

     
Something went wrong.
     
      {this.state.error && this.state.error.toString()}
      
      {this.state.errorInfo.componentStack}
     
    
   );
  }
  // Normally, just render children
return this.props.children;
 } 
}

class BuggyCounter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
this.setState(({counter}) => ({
   counter: counter + 1
  }));
 }

 render() {
if (this.state.counter === 5) {
   // Simulate a JS error
throw new Error('I crashed!');
  }
return {this.state.counter};
 }
}

function App() {
return (
  

   

    
     This is an example of error boundaries in React 16.
     
     Click on the numbers to increase the counters.
     
     The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
    
   
   
   
    
These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.
    
    
   
   
   
These two counters are each inside of their own error boundary. So if one crashes, the other is not affected.
   
   
  
 );
}



ReactDOM.render(
 ,
 document.getElementById('root')
);

以上是“React16中異常處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！