QuikieApps

反应错误边界:知道如何全部安装

关于React错误边界的介绍

在过去的日子里,JavaScript组件内部的错误经常会破坏React的内部状态。结果,它会导致在后续渲染中产生隐式错误。这些错误的主要原因是在应用程序代码中发生的一个较早的错误。但是,React并未提供一种优雅的方式来处理组件中的组件,甚至无法恢复它们。

UI某些部分的JavaScript错误不应妨碍整个应用程序的正常运行。为了解决这个问题,React 16引入了一个新概念,称为“错误边界。错误边界是React组件,可以在子组件树内的任何位置捕获错误。它标识并跟踪这些错误,而不是显示崩溃的组件树,而是显示 后备用户界面。 在生命周期方法中,错误是由错误边界捕获的,并且位于错误树下面的整个树中的构造函数中。

但是,错误边界无法捕获以下错误:

  1. 事件处理程序
  2. 服务器端渲染
  3. 异步代码例如: setTimeout 要么 requestAnimationFrame 回叫
  4. 在错误边界本身(而不是其子级)中引发的错误

 如果类组件定义了两个生命周期方法,例如 静态的 getDerivedStateFromError() 要么 componentDidCatch() 然后它成为错误边界。为了在引发错误后呈现后备用户界面,我们使用 静态getDerivedStateFromError()。 另外,为了检查错误信息,我们使用 componentDidCatch()。

因此它可以用作常规组件:

错误边界的工作原理与JavaScript相同 抓住{} 块,除了它仅适用于组件。但是,只有类组件才能成为错误边界。大多数时候,您会发现自己需要声明一个错误边界组件,该组件将在整个应用程序中使用。更不用说 错误边界只能捕获树中项目下方组件中的那些错误。  但是,错误边界无法捕获其内部的错误。因此,您可以看到它的工作方式类似于JavaScript中的catch {}块。 

包含错误边界的模块的安装

 

包含错误边界的模块通过 npm 其中有丰富的 节点 我们应该将其安装为我们的项目之一 依赖项:

npm install –保存反应错误边界

 

反应错误边界需要放置在哪里?

错误边界的粗糙程度取决于应用程序的开发人员。我们可能会在顶层包装路线组件。它为用户显示“发生错误”消息。就像处理崩溃的服务器端框架一样。开发人员还将单个小部件包装在错误边界内,以防止它们崩溃。

为什么不尝试/赶上?

毫无疑问,try / catch绝对是很棒的选择,但它仅适用于必须执行的代码。

反应中的组件本质上是声明性的,并指定需要呈现的内容:

<Button />

可以肯定地说,React边界保存并保留了React的声明性。它也表现出开发人员所期望的。例如:即使程序遇到任何错误 componentDidUpdate 由a引起的方法 setState 位于树深处的某个地方,它仍将传播最接近它的错误边界。

没有错误边界:

我们总是会在应用程序中遇到意外错误这一事实是不可避免的。我们可能试图访问深度嵌套在不存在的对象上的属性。有时也有可能有时不受我们控制。没有错误边界,当应用遇到错误时会发生什么?发生这种情况时,组件将完全卸载自身,并为用户提供空白的HTML页面。错误边界为我们提供了一种非常优雅地处理这些错误的方法。 

具有错误边界:

反应鼓励我们从组件的角度进行思考。对于我们的应用程序开发人员而言,很明显,一个应用程序由多个较小的组件组​​成。以这种方式工作确实有助于我们将应用程序视为简单的小单元。除此之外,如果我们可以包含任何组件中可能发生的错误,那将是非常好的。单个故障不应导致整个应用程序崩溃,React确保您永远不必通过React错误边界来面对这种情况。

为了让我们知道React边界有什么伟大的事情,重要的是要知道确切的React错误边界是什么。如果您认为这是一个新组件或JavaScript库,那么它与您的想法完全相反。相反,实际上是一种用于处理React组件中的错误的策略。在反应错误边界中,React Components中有两种方法的特定用法可供我们使用。因此,当我们谈论它时,我们应该了解这些生命周期方法是什么。

两种生命周期方法是什么?

  1. 静态getDerivedStateFromError:这是一个生命周期方法,它允许错误边界有机会更新状态并由此触发最后的render()。如果以一个示例为例,则用于提供更人性化的错误消息而不是损坏的组件的状态就是此状态。
  2. componentDidCatch:这是用于触发副作用的生命周期方法。例如,将错误记录到某些工具(例如Crashlytics)中,我们可以访问info.componentStack以获得对开发人员友好的堆栈跟踪,这对于触发代码中存在的任何错误非常有用,因此可以预先解决它们。

 

错误边界和尝试/捕获

错误边界永远不会与try / catch语句直接竞争。它们旨在拦截来自React Component中三个特定位置的错误。这些地方是:

  1. 在渲染阶段
  2. 在生命周期方法中
  3. 在构造函数中

这些基本上是组件的反应部分,作为对点,我们可以说这些地方错误边界将无法捕获任何错误。

  1. 那里的事件处理程序,例如onClick,onCharge等
  2. setTimeout或requestAnimationFramecallback
  3. 服务器端渲染(SSR)
  4. 由于错误边界本身而不是其子元素而导致的错误。

结论

如果作为开发人员您没有在React应用程序中使用错误边界,那么您应该立即考虑在React应用程序代码的最高级别添加一个错误边界。另外,强烈建议将错误报告服务集成到您的项目中,以便遇到任何错误的人都可以找您并报告问题。因此,此组件为我们提供了可重用以及简单的包装器类,我们可以使用该类来将其包装在您的各种组件周围,以便可以轻松处理组件层次结构中发生的任何渲染错误。

 

Exit mobile version