快捷導(dǎo)航

React 錯(cuò)誤邊界組件的處理

更新時(shí)間：2021年04月12日 09:58:17 作者：xuxiaowei

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

這是React16的內(nèi)容，并不是最新的技術(shù)，但是用很少被討論，直到通過文檔發(fā)現(xiàn)其實(shí)也是很有用的一部分內(nèi)容，還是總結(jié)一下～

React中的未捕獲的 JS 錯(cuò)誤會(huì)導(dǎo)致整個(gè)應(yīng)用的崩潰，和整個(gè)組件樹的卸載。從 React16 開始就是這樣。但是同時(shí)React也引入了一個(gè)新的概念——錯(cuò)誤邊界。

定義，是什么

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

工作方式類似于try-catch，但是錯(cuò)誤邊界只用于 React 組件。

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

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

通過一個(gè)例子來逐步演示要怎么用錯(cuò)誤邊界：

export default class ErrorTest extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <BugCounter></BugCounter>
        <span>my name is dan</span>
      </div>
    );
  }
}

// Bug 報(bào)錯(cuò)組件
class BugCounter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  click = () => {
    this.setState(({ counter }) => ({ counter: counter + 1 }));
  };
  render() {
    if (this.state.counter === 5) {
      throw new Error("crashed!");
    }
    return (
      <div>
        <h3 onClick={this.click}>{this.state.counter}</h3>
      </div>
    );
  }
}

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

點(diǎn)擊數(shù)字0，會(huì)逐步遞增。但是數(shù)字等于5的時(shí)候，組件會(huì)拋出一個(gè)Error:

該Error會(huì)引起整個(gè)Demo的崩潰，連外部的<span>my name is dan</span>也顯示不出來了，這時(shí)還沒有添加錯(cuò)誤邊界。

生產(chǎn)模式下，會(huì)直接白屏，并在控制臺(tái)報(bào)錯(cuò)：

getDerivedStateFromError & componentDidCatch

需要一個(gè)錯(cuò)誤邊界來處理這種崩潰。如何定義一個(gè)錯(cuò)誤邊界？

定義一個(gè)組件，并實(shí)現(xiàn)static getDerivedStateFromError() 或者componentDidCatch() 生命周期方法（可以都實(shí)現(xiàn)或者選擇其一）。這個(gè)組件就會(huì)變成一個(gè)錯(cuò)誤邊界。

關(guān)于這兩個(gè)生命周期函數(shù)，可以通過鏈接查看，總結(jié)如下：

componentDidCatch(error, info)

error是拋出的錯(cuò)誤對(duì)象，而info則包含了組件引發(fā)錯(cuò)誤的棧信息。函數(shù)在提交階段被調(diào)用。是可以執(zhí)行副作用的。

static getDerivedStateFromError(error)

在子組件拋出錯(cuò)誤后調(diào)用，會(huì)將拋出的錯(cuò)誤作為參數(shù)。需要返回一個(gè)值，以更新state。該函數(shù)在渲染階段調(diào)用，不允許出現(xiàn)副作用。如果在捕獲錯(cuò)誤后需要執(zhí)行副作用操作，應(yīng)該在componentDidCatch中進(jìn)行。

制作錯(cuò)誤邊界組件

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

捕獲子組件錯(cuò)誤，組件內(nèi)部記錄出錯(cuò)狀態(tài)
在出錯(cuò)狀態(tài)下顯示備用UI，在正常狀態(tài)下顯示子組件

那么就可以像這樣：

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

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

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

  render() {
    if (this.state.hasError) {
      // 你可以自定義降級(jí)后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

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

componentDidCatch(error, errorInfo) {
  // Catch errors in any components below and re-render with error message
  this.setState({
    error: error,
    errorInfo: errorInfo
  })
}

捕獲處理

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

import { Component } from "react";

export default class ErrorTest extends Component {
  render() {
    return (
      <div>
        <ErrorBoundary>
          <BugCounter></BugCounter>
        </ErrorBoundary>
        <span>my name is dan</span>
      </div>
    );
  }
}

// Bug 報(bào)錯(cuò)組件
class BugCounter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  click = () => {
    this.setState(({ counter }) => ({ counter: counter + 1 }));
  };
  render() {
    if (this.state.counter === 5) {
      throw new Error("crashed!");
    }
    return (
      <div>
        <h3 onClick={this.click}>{this.state.counter}</h3>
      </div>
    );
  }
}

// 錯(cuò)誤邊界處理組件
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  render() {
    if (this.state.hasError) {
      // 你可以自定義降級(jí)后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

拋出異常在開發(fā)模式下依然是報(bào)錯(cuò)的，但是在使用yarn build之后，再通過http-server掛起來之后，訪問生產(chǎn)的頁面：