React错误边界ErrorBoundaries示例如何改写成长尾词？

本文共计1538个文字，预计阅读时间需要7分钟。

目录+引言+注意+实现+错误边界+应放置在哪里？+未捕获错误（Uncaught Errors）如何处理？+注意：自React 15起，命名更改+引用+过度，组件内的代码异常会导致React的内部状态被破坏，产生错误

目录

• 引言
• 注意
• 实现
• 错误边界应该放置在哪？
• 未捕获错误（Uncaught Errors）该如何处理？
• 注意：自 React 15 的命名更改

引言

过去，组件内的代码异常会导致 React 的内部状态被破坏，产生可能无法追踪的错误。但 React 并没有提供一种优雅处理这些错误的方式，也无法从错误中恢复。

默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载，这当然不是我们期望的结果。

部分组件的错误不应该导致整个应用崩溃。为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的异常，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。