什么是错误边界？
“错误边界是React组件，可在其子组件树的任何位置捕获JavaScript错误，记录这些错误，并显示后备UI，而不是崩溃的组件树。 错误边界会在渲染期间，生命周期方法中以及在其下方的整个树的构造函数中捕获错误。” – Dan Abramov
我博客的更新文章
您可以通过定义新的生命周期方法componentDidCatch(error, errorInfo)来创建错误边界类组件。
componentDidCatch（）生命周期方法
componentDidCatch（error，errorInfo）{}
第一个方法参数是引发的实际错误。 第二个参数是具有componentStack属性的对象，该属性包含组件堆栈跟踪信息。 componentDidCatch()生命周期方法的工作原理类似于JavaScript的catch {}但适用于组件。 错误边界本身无法捕获错误。 该错误将传播到其上方最近的错误边界。 听起来有点熟？
提示：JavaScript catch {} 块。
为什么需要componentDidCatch（）？
在React 16错误边界之前，组件内部的错误会导致不可恢复的隐式错误。 没有很好的方法来处理组件中的这些错误。
对16个错误边界做出反应以进行救援！
优点：
- 声明式与命令式。 React的优点之一是它的声明性代码风格。 组件本身声明应呈现的内容。 错误边界遵循React的声明性。 您不再需要使用命令性代码解决方案（例如
try/catch或if/else基于错误进行UI的条件渲染。 - 预期的行为。 错误边界会将错误传播到最接近的错误边界，而不管错误发生在树中的深度如何。
- 可重用性。 您可以编写一个错误边界组件，然后在整个应用程序中重复使用它。
- 组成所有事物
问题：
¯\ _（ツ）_ /¯
如何使用错误边界？
我创建了一个CodePen来演示componentDidCatch()生命周期方法。 我强烈建议分叉笔，并添加更多的“错误边界”和组件以使它们发挥作用。
什么时候应该使用错误边界？
实际上，大多数情况下，您需要一次声明一个错误边界组件，并在整个应用程序中使用它。 – 丹·阿布拉莫夫
您可以包装顶级路由组件，也可以包装可能包含晦涩代码的组件。 由您决定如何最好地应对应用程序崩溃。
一旦React 16发布，就会出现更多的标准和关于错误边界的最佳实践。 错误边界将鼓励JavaScript错误报告服务，该服务可在生产环境中的componentDidCatch()生命周期方法中触发。
有关更多详细信息，请查看 Dan Abramov的 React 16中 的 Error Handling 。
在评论中让我知道您如何在应用程序中使用错误边界！ 您可以在Twitter @_SeanGroff上关注我以获得更多React 天赋
