react中的Error Boundaries

                                                                                  react中的Error Boundaries

在没有去认真阅读过react高级指南之前，对于错误界限这个概念毫无任何认识。在阅读过官网文档之后，对于Error Boundaries这个概念便有了下面的认识。

Error Boundaries的引入

部分UI组件中的JavaScript错误不应该破坏整个应用程序。为了解决React用户的这个问题，React 16引入了一个新的概念Error Boundaries

Error Boundaries是整个react组件去捕捉其所有子组件中的js错误，并且将其记录，用一个回退的组件去显示出来，而不是使整个的react组件树崩溃。

Error Boundaries不会捕获下面的这些错误

1.事件处理   2.异步加载（例如: settimeout () 与 回调等）3.服务器渲染  4.自己本身给的错误信息

下面是官方举的一个实际例子，用来说明这种Error Boundaries，其描述是如果在class组件中定义了一个componentDidCatch()

静态的getDerivedStateFromError()就会在出现错误后呈现内容。下面就是整个实例的代码部分

你也可以使用规定的组件形式来使用，用一个ErrorBoundary组件去包裹里面你的子组件中的内容就可以了

Error boundaries的工作原理就如果catch(),如果产生错误就执行什么样的内容。需要注意的就是上面所说的Error boundaries不会捕捉到的错误，如果是你当前组件发生错误，你可以将上面的ErrorBoundary组件包裹在当前组件的上面的一层。其设置的地方取决于你自己。

没有捕捉到的错误

如果你在你的组件中没有捕捉到任何的错误，但是实际上他却反生了错误，这样的话就会导致整个的react组件树崩溃。

新的表现对于Error boundaries

1.在这上面你还需要明白重要的一点，有的时候就算你捕捉到了错误，但是相比于删除来说，删除会产生更好的效果，比如：如果产品中涉及到了与信息发送有关的组件发生错误，这个时候你就有可能将信息发送错误，那么这个时候最好的方式就是去删除这个组件，又比如，当你在使用支付这个功能的时候，你的支付的金额这个组件中显示的内容有错，你每次获取或者要去改变的金额数不对，那么这就会产生一个很大的错误，那么此时换不如去直接的删除整个报错的组件。

2.增加Error boundaries能够增加更好的用户体验，如果你的组件中某个组件发生错误，但是这个发生错误的组件并不会去影响其他的组件中的交互功能。

组件堆栈的追踪

有的时候，在react16版本中，就算你没有捕获异常，但是可以在打印的时候输出异常，这种打印输出的堆栈的追踪，还会提示会精确到你代码中的某个位置，这就是react16版本中的堆栈的追踪。

try/catch

try/catch语句其应用的地方只能是在命名行中，但是在react中，其采用的是声明行的形式，因此你需要去具体的表明，当你这段代码有问题时，你应该去显示怎样的内容。

事件处理

Error Boundaries不会去捕获事件处理中的异常的信息，与呈现方法和生命周期方法不同，事件处理程序不会在呈现期间发生。所以如果他们抛出，React仍然知道在屏幕上显示什么。另外如果要在事件处理中去捕获异常的信息，你就得去使用try/catch语句。例如在下面的这个例子中所示

对于Error Boundaries，根据官网上所说的大概内容就是这样，在这里你只需要记住几点，第一Error Boundaries不能捕获的情况，第二就是其捕获的范围是，第三就是组件堆栈的追踪。