react 错误边界_React中错误边界的简单指南

react 错误边界

In this article, you’ll learn about Error Boundaries via code snippets and interactive demos. If you’re still wondering what Error Boundaries are and how they work, this simple guide is for you! 🥅🐛

在本文中，您将通过代码片段和交互式演示来了解错误边界 。 如果您仍然想知道什么是错误边界以及它们如何工作，那么本简单指南非常适合您！ 🥅🐛

Error Boundaries were introduced in React v16 as a way to catch tricky errors that occur during the render phase. In the past this would have caused the app to unmount completely, and the user would just see a blank web page, which is not ideal! 😱

在React v16中引入了错误边界，以捕获在渲染阶段发生的棘手错误。 在过去，这会导致应用程序完全卸载，而用户只会看到空白网页，这是不理想的！ 😱

没有错误边界 (Without Error Boundaries)

It’s inevitable that we’ll encounter unexpected errors in our apps. You could be trying to access a deeply-nested property on an object that doesn’t exist, or sometimes it’s not in your control (like a failed HTTP request to a 3rd-party API).

不可避免的是，我们会在应用程序中遇到意外错误。 您可能试图访问一个不存在的对象上的深层属性，或者有时不在您的控件中(例如，对第三方API的HTTP请求失败)。

In the demo below, we’ll simulate an error to see what normally happens without an Error Boundary.

在下面的演示中，我们将模拟一个错误，以查看没有错误边界的情况下通常会发生什么。

Click the “+” button, and it will fail at 5:

单击“ +”按钮，它将在5失败：

See the Pen alligatorio-react-error-boundaries-1 by wle8300 (@wle8300) on CodePen.

请参阅CodePen上wle8300 ( @ wle8300 )的Pen alligatorioio-react-error-boundaries-1 。

BuggyCounter.js

BuggyCounter.js