欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年12月13日 15:49:54   作者:Jovie  
這篇文章主要為大家介紹了Reactjs?錯誤邊界優(yōu)雅處理方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

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

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

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

什么是錯誤邊界?

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

錯誤邊界可以捕捉

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

錯誤邊界不能捕捉

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

錯誤邊界的實現(xiàn)

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

讓我們創(chuà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;
  }
}

用錯誤邊界包住組件

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

// Wrapping child component
<ErrorBoundary>
 <ComponentThatThrowsError />
</ErrorBoundary>
// Wrapping our entire application
<ErrorBoundary>
 <App />
</ErrorBoundary>

拋出一個錯誤

讓我們在useEffect中拋出一個錯誤,看看我們的錯誤邊界是否能抓住。

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)計數(shù)器的值等于5時,我們就拋出了一個錯誤。

晃動你的叔叔

我們可以看到,一旦子組件的計數(shù)器達(dá)到5,應(yīng)用程序就會為該組件渲染回退的用戶界面,而當(dāng)主錯誤邊界捕捉到一個錯誤時,它就會渲染出白色的屏幕,顯示出出錯的情況。

總結(jié)

我們在這一章中講了很多,我希望這對你來說不算太多。你學(xué)到了如何創(chuàng)建錯誤邊界,以及為什么和在哪里使用它們。它們?nèi)绾问鼓愕膽?yīng)用程序的體驗更好。

以上就是Reactjs 錯誤邊界優(yōu)雅處理方法demo的詳細(xì)內(nèi)容,更多關(guān)于Reactjs 錯誤邊界的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 使用 React hooks 實現(xiàn)類所有生命周期

    使用 React hooks 實現(xiàn)類所有生命周期

    react 自 16.8 開始,引入了 Hooks 概念,使得函數(shù)組件中也可以擁有自己的狀態(tài),并且可以模擬對應(yīng)的生命周期,這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下
    2023-02-02
  • React實現(xiàn)評論的添加和刪除

    React實現(xiàn)評論的添加和刪除

    這篇文章主要為大家詳細(xì)介紹了React實現(xiàn)評論的添加和刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 使用Ant Design Anchor組件的一個坑及解決

    使用Ant Design Anchor組件的一個坑及解決

    這篇文章主要介紹了使用Ant Design Anchor組件的一個坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • 詳解如何在React組件“外”使用父組件的Props

    詳解如何在React組件“外”使用父組件的Props

    這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • React Native功能豐富的Toast通知庫

    React Native功能豐富的Toast通知庫

    這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • react項目自行配置熱更新的實現(xiàn)

    react項目自行配置熱更新的實現(xiàn)

    本文主要介紹了react項目自行配置熱更新的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-11-11
  • React受控組件與非受控組件詳細(xì)介紹

    React受控組件與非受控組件詳細(xì)介紹

    具體來說這是一種react非受控組件,其狀態(tài)是在input的react內(nèi)部控制,不受調(diào)用者控制??梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識,感興趣的朋友一起看看吧
    2022-09-09
  • React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟

    React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟

    這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Express+React+Antd實現(xiàn)上傳功能(前端和后端)

    Express+React+Antd實現(xiàn)上傳功能(前端和后端)

    這篇文章主要介紹了Express+React+Antd實現(xiàn)上傳功能(前端和后端),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • React實現(xiàn)前端選區(qū)的示例代碼

    React實現(xiàn)前端選區(qū)的示例代碼

    本文主要介紹了React實現(xiàn)前端選區(qū)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05

最新評論