React如何定義錯(cuò)誤邊界

這篇文章將為大家詳細(xì)講解有關(guān)React如何定義錯(cuò)誤邊界，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

定義錯(cuò)誤邊界

在Javascript里，我們都是使用 try/catch 來(lái)捕捉可能發(fā)生的異常，在catch中處理錯(cuò)誤。 比如：

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

這樣， 即便發(fā)生了錯(cuò)誤， 我們的應(yīng)用也不至于崩潰白屏。

React 歸根結(jié)底也是Javascript，本質(zhì)上沒(méi)什么不同， 所以同樣的使用try/catch  也沒(méi)有問(wèn)題。

然而， 由于React 實(shí)現(xiàn)機(jī)制的原因， 發(fā)生在組件內(nèi)部的Javascript 錯(cuò)誤會(huì)破壞內(nèi)部狀態(tài)， render會(huì)產(chǎn)生錯(cuò)誤：

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

基于以上原因，React 團(tuán)隊(duì)引入了Error Boundaries:

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

Error boundaries, 其實(shí)就是React組件， 你可以用找個(gè)組件來(lái)處理它捕捉到的任何錯(cuò)誤信息。

當(dāng)組件樹(shù)崩潰的時(shí)候，也可以顯示你自定義的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>

關(guān)于“React如何定義錯(cuò)誤邊界”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。