这篇文章主要介绍了react之异常处理机制error Boundaries是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react之异常处理机制error Boundaries是什么文章都会有所收获，下面我们一起来看看吧。
UI的某部分引起的JS错误不应该破坏整个程序，为了帮React的使用者解决这个问题，React 16介绍了一种关于错误边界（error boundary)的新观念。
error boundaries 让react组件可以捕获在他们子级组件树任何地方的错误,并且打印出这些错误和演示一个预备UI（fallback UI），从而替换那些出现异常的组件树。Error boundaries在rendering，lifeCyclemethod或处于他们树层级之下的构造函数中捕获错误。
（注释：lifecycle method是react固有名词，包括componentWillUpdate，componentWillReceiveProps,render等方法，这些方法会自动调用）
注意： error boundaries并不会捕捉这些错误：
1.事件处理器
2.异步代码
3.服务端的渲染代码
4.在error boundaries区域内的错误
在这个lifecycle method： componentDIdCatch(error,info) 里的类会变成一个 error boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// 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 <h2>Something went wrong.</h2>;
}
return this.props.children;
}
}然后你就可以像一个普通组件一样使用它
<ErrorBoundary> <MyWidget /> </ErrorBoundary>
componentDidCatch()方法像JS的catch{}模块一样工作，但是对于组件，只有class类型的组件(class component)可以成为一个error boundaries，在实际上，大多数情况下你可能只需要在整个程序中定义一个error boundary组件，然后你就可以一直使用它了！
请注意error boundaries仅仅可以捕获到在他们树的层级下面的错误，而不能捕获到本层级的错误，如果一个error boundaries渲染错误信息失败了，那么这个错误将会传播到一个在它层级上面，并且离它最近的error boundary 。这就像js的{}模块的工作机制一样。
error: 这是一个已经被抛出的错误
info:这是一个componentStack key。这个属性有关于抛出错误的组件堆的信息
componentDidCatch(error, info) {
/* Example stack information:
in ComponentThatThrows (created by App)
in ErrorBoundary (created by App)
in div (created by App)
in App
*/
logComponentStackToMyService(info.componentStack);关于error boundaries的后续处理由你做主，你可能会指定一个最高等级的路由组件去给用户标识某些地方出了问题，就像服务端的框架处理异常一样，你也可以指定一个在错误边界内的个人的小页面让整个程序不至于发生崩溃。
这种变化有一个重要的新含义，对于React 16，没有被任何error boundary捕获的错误将会导致整个React组件树的崩溃。
我们对这个决定有争论，但是在我们的经验里，留下一个崩溃的UI界面比完全移除它要糟糕，例如，在一个产品比如聊天器中，留下一个崩坏的UI界面可能会导致某个人发送信息给一个并非他想要发送的人。同样的，对于一个支付类的app来说，不要显示任何东西显然比显示一个错误的金额数目要好。
这个改动意味着如果你迁移到React 16，你可能会发现一些以前没有注意到的，并且是确确实实存在的在你程序中的异常，增加error boundaries会让你在某些地方出现问题的时候可以提供更好的用户体验。
举个例子，facebook的侧边栏，信息面板，对话记录以及消息输入框处于被分割开来的error boundaries中，如果在他们的UI子组件中发生了崩溃事件，那么其他的组件还可以正常运行。
我们同样鼓励你使用JS 错误报道服务（或者你自己建立一个），然后你就可以了解到这些未被处理的异常是如何发生的，接着解决他们。
React 16 会把所有render过程中发生的错误打印给开发者，即使程序意外的包含了它。它不仅仅提供了错误信息和追踪js堆，也提供了组件的堆路径，现在你可以精确的看到组件树中错误发生的地方。
你同样可以在组件的堆追踪中看到文件名字和行数，这是creat react app项目的默认配置
如果你没有使用Create React App ，你也可以通过添加这个插件，手动的管理你的babel配置。注意：它必须严格的限制在开发过程中使用，生产过程一定要剔除。
注意： 在堆的追踪中看到的组件名字取决于 Function.name属性。如果你想要支持那些现在还没有原生提供这些的浏览器和设备，比如ie11，consider including a Function.name polyfill in your bundled application, such as function.name-polyfill. 否则，你必须明确的在你所有的组件中都设置displayName.
try/catch是非常棒的但是它只在imperative code(命令式代码）中起作用
try {
showButton();
} catch (error) {
// ...
}然而，react组件是声明式的并且指定应该被渲染的内容
<Button />
Error boundaries保留了React的声明式性质，并且拥有你期待的表现。比如，即使通过某个在树的深层setState，在componentDidUpdate拦截中发生了错误，它也仍然会被正确的传送到最近的error boundary。
error boundaries并不能捕获event handles中的异常。
React并不需要error boundaries从event handles中恢复错误。与render方法和lifecycle拦截不同的是，event Handles并不会在rendering期间发生。所以如果他们被抛出，React仍然知道怎么去渲染。
如果你需要捕获event handler，使用普通的js代码try/catch 声明
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
handleClick = () => {
try {
// Do something that could throw
} catch (error) {
this.setState({ error });
}
}
render() {
if (this.state.error) {
return <h2>Caught an error.</h2>
}
return <div onClick={this.handleClick}>Click Me</div>
}
}注意以上代码仅仅展示通常的js习惯，而没有使用error boundaries。
React 15通过unstable_handleError方法 包含了一些有限的error boundaries支持。这个方法现在已经不能运用，你需要使用compoentDIdCatch。
关于“react之异常处理机制error Boundaries是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react之异常处理机制error Boundaries是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
