React 错误边界
错误边界介绍
部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 react 用户的这个问题，React 16 引入了一个 错误边界(Error Boundaries) 的新概念
错误边界是 React 组件，它可以 在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。g
错误边界无法捕获如下错误:
- 事件处理
- 异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
- 服务端渲染
- 错误边界自身抛出来的错误 （而不是其子组件）
如果一个类组件定义了生命周期方法中的任何一个（或两个）static getDerivedStateFromError() 或 componentDidCatch()，那么它就成了一个错误边界。 使用 static getDerivedStateFromError()在抛出错误后渲染回退 UI。 使用 componentDidCatch() 来记录错误信息。
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, info) {
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}而后你可以像一个普通的组件一样使用：
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>错误边界(Error Boundaries) 仅可以捕获其子组件的错误。错误边界无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会向上冒泡至最接近的错误边界
static getDerivedStateFromError()
在后代组件抛出错误后调用此生命周期。 它接收作为参数抛出的错误，并应返回值以更新 state(状态)。
componentDidCatch()
componentDidCatch(error, info)
- error - 抛出的错误。
- info - 包含 componentStack 键的对象，其中包含 有关哪个组件引发错误的信息 。
原文：http://react.html.cn/docs/error-boundaries.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！