react中的Error Boundaries

react

                                                                                  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不能捕获的情况,第二就是其捕获的范围是,第三就是组件堆栈的追踪。

以上是 react中的Error Boundaries 的全部内容, 来源链接: utcz.com/z/382582.html

回到顶部