Reactjs?錯(cuò)誤邊界優(yōu)雅處理方法demo

更新時(shí)間：2022年12月13日 15:49:54 作者：Jovie

這篇文章主要為大家介紹了Reactjs?錯(cuò)誤邊界優(yōu)雅處理方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

每當(dāng)你的react應(yīng)用在任何react功能或類(lèi)組件中遇到任何javascript錯(cuò)誤時(shí)，都會(huì)破壞整個(gè)應(yīng)用，這對(duì)你的終端用戶來(lái)說(shuō)是一種糟糕的體驗(yàn)。React 16 引入了錯(cuò)誤邊界 ，以擺脫你的應(yīng)用程序中的這種糟糕體驗(yàn)。有了錯(cuò)誤邊界 ，你現(xiàn)在可以優(yōu)雅地處理并讓用戶知道，每當(dāng)你的應(yīng)用程序遇到錯(cuò)誤時(shí)，就會(huì)出現(xiàn)問(wèn)題。

在這篇文章中，我們將學(xué)習(xí)如何通過(guò)實(shí)現(xiàn)錯(cuò)誤邊界來(lái)處理這些錯(cuò)誤 ，并看看它們的作用。

首先，在vs code或任何其他IDE中創(chuàng)建一個(gè)新的react應(yīng)用程序，我個(gè)人更喜歡VS Code。

什么是錯(cuò)誤邊界？

錯(cuò)誤邊界也是反應(yīng)組件，它可以幫助你捕捉被錯(cuò)誤邊界包裹的組件中的錯(cuò)誤，并顯示一個(gè)回退 UI（當(dāng)捕捉到錯(cuò)誤時(shí)顯示的UI，而不是崩潰的應(yīng)用程序）。

錯(cuò)誤邊界可以捕捉

渲染錯(cuò)誤
生命周期錯(cuò)誤
構(gòu)造器錯(cuò)誤

錯(cuò)誤邊界不能捕捉

事件處理程序中的錯(cuò)誤
異步代碼中的錯(cuò)誤
服務(wù)器端渲染中的錯(cuò)誤
錯(cuò)誤邊界中的錯(cuò)誤 (Duhh!)

錯(cuò)誤邊界的實(shí)現(xiàn)

要使一個(gè)類(lèi)組件成為錯(cuò)誤邊界組件，你只需要定義**靜態(tài)的getDerivedStateFromError()和componentDidCatch()**生命周期方法。

讓我們創(chuàng)建一個(gè)新的類(lèi)組件并使其成為一個(gè)錯(cuò)誤邊界，讓我們滾動(dòng)

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }
  componentDidCatch(error, errorInfo) {
    // use lifecycle to catch errors in any components below and re-render fallback UI
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }
  render() {
    if (this.state.errorInfo) {
      // Fallback UI
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // without error render normally in happy flow 
    return this.props.children;
  }
}

用錯(cuò)誤邊界包住組件

現(xiàn)在我們可以用錯(cuò)誤邊界來(lái)包裝我們的整個(gè)應(yīng)用程序，或者包裝我們的子組件，以便在特定的組件上顯示后退的用戶界面，讓我們看看這個(gè)動(dòng)作吧

// Wrapping child component
<ErrorBoundary>
 <ComponentThatThrowsError />
</ErrorBoundary>

// Wrapping our entire application
<ErrorBoundary>
 <App />
</ErrorBoundary>

拋出一個(gè)錯(cuò)誤

讓我們在useEffect中拋出一個(gè)錯(cuò)誤，看看我們的錯(cuò)誤邊界是否能抓住。

const ComponentThatThrowsError = () => {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (counter === 5) {
      throw new Error("Something went wrong");
    }
  }, [counter]);
  return (
    <div>
      <p>Parent Component Counter</p>
      <button
        className="btn"
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        {counter}
      </button>
    </div>
  );
};

當(dāng)計(jì)數(shù)器的值等于5時(shí)，我們就拋出了一個(gè)錯(cuò)誤。