这篇文章将为大家详细讲解有关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如何定义错误边界”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。