React如何定義錯誤邊界

這篇文章將為大家詳細講解有關React如何定義錯誤邊界，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

定義錯誤邊界

在Javascript里，我們都是使用 try/catch 來捕捉可能發生的異常，在catch中處理錯誤。 比如：

function getFromLocalStorage(key, value) {  try {    const data = window.localStorage.get(key)    return JSON.parse(data)  } catch (error) {    console.error  }}

這樣， 即便發生了錯誤， 我們的應用也不至于崩潰白屏。

React 歸根結底也是Javascript，本質上沒什么不同， 所以同樣的使用try/catch  也沒有問題。

然而， 由于React 實現機制的原因， 發生在組件內部的Javascript 錯誤會破壞內部狀態， render會產生錯誤：

https://github.com/facebook/react/issues/4026

基于以上原因，React 團隊引入了Error Boundaries:

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

Error boundaries, 其實就是React組件， 你可以用找個組件來處理它捕捉到的任何錯誤信息。

當組件樹崩潰的時候，也可以顯示你自定義的UI，作為回退。

看 React 官方提供的例子：https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

class ErrorBoundary extends React.Component {  constructor(props) {    super(props)    this.state = { hasError: false }  }    static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true }  }    componentDidCatch(error, errorInfo) {    // You can also log the error to an error reporting service    logErrorToMyService(error, errorInfo)  }    render() {    if (this.state.hasError) {      // You can render any custom fallback UI      return <h2>Something went wrong.</h2>    }    return this.props.children  }}

使用方式：

<ErrorBoundary>  <MyWidget /></ErrorBoundary>

關于“React如何定義錯誤邊界”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。