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如何定义错误边界”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。