在 React 应用程序中，错误可能会在组件中发生。这些错误通常会中断整个组件树，导致应用程序的其他部分无法正常工作。为了解决这个问题，React 引入了错误边界的概念。错误边界是一种 React 组件，它可以从其子组件中捕获JS错误，并可以选择性地呈现一个备用的 UI，以防止应用程序崩溃。
错误边界的使用方法
在 React 中使用错误边界很简单。首先，您需要编写一个错误边界组件。这个组件需要实现 componentDidCatch() 方法。在该方法中，您可以捕获子组件中发生的错误。
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ----- ---------- ---- --
-
------------------------ ---------- -
-- -------- ----- -
---------------
------ ------
---------- ---------
---
-
-------- -
-- ------------ --
-- ---------------------- -
------ -
-----
--------------
-------- -------- ----------- ---------- ---
----------------- -- ----------------------------
--- --
-------------------------------------
----------
------
--
-
-- ---------
------ --------------------
-
-在这个例子中，我们定义了一个 ErrorBoundary 组件，该组件记录了错误信息，并选择性地呈现了一个备用 UI。如果没有错误，则 ErrorBoundary 组件正常呈现它的子组件。
一旦 ErrorBoundary 组件定义完毕，您就可以将其用于 React 组件树中。要使用错误边界，请仅包装可能出现错误的子组件。
<ErrorBoundary> <MyComponentWithPotentialError /> </ErrorBoundary>
这里的 MyComponentWithPotentialError 组件可能会抛出JS错误。通过使用 ErrorBoundary 组件，我们可以防止错误向上传播和导致应用程序崩溃。
深度和学习意义
错误边界是 React 中一个强大且有用的概念。使用错误边界，开发者可以更好地管理应用程序中的错误，并在应用程序错误时提供更好的用户体验。
当 React 组件树中的一个组件抛出JS错误时，React 会尝试卸载整个组件树。这意味着其他组件也无法正常工作。错误边界可以防止这种情况的发生。通过捕获错误并呈现备用UI，错误边界使应用程序更加鲁棒，并减少了软件错误的影响。
示例代码
下面是一个示例代码，它使用错误边界来呈现一个备用UI。在这个示例代码中，我们假设 MyComponentWithPotentialError 组件会抛出 TypeError 错误。
-- -------------------- ---- -------
----- ----------------------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
-- ----------------- --- -- -
-- -------- - -- -----
----- --- ------------ -----------
-
------ --- ---------------------------------------------------
-
-
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ----- ---------- ---- --
-
------------------------ ---------- -
-- -------- ----- -
---------------
------ ------
---------- ---------
---
-
-------- -
-- ------------ --
-- ---------------------- -
------ -
-----
------ ----- --- --------------
-------- -------- ----------- ---------- ---
----------------- -- ----------------------------
--- --
-------------------------------------
----------
------
--
-
-- ---------
------ --------------------
-
-
-------- ----- -
------ -
-----
---------------
------------------------------ --
----------------
------
--
-
-------------------- --- ---------------------------------在这个示例代码中，我们使用 ErrorBoundary 组件包装了 MyComponentWithPotentialError 组件。当 count State 达到 5 时，MyComponentWithPotentialError 组件会抛出 TypeError 错误。通过使用 ErrorBoundary 组件，我们可以捕获这个错误并呈现一些备用 UI，如下所示：
结论
在 React 中，错误边界是一种非常强大的工具。他们可以帮助应用程序更加稳定，更具有鲁棒性。错误边界的使用也非常简单，只需按照本文中的步骤进行即可。如果您正在编写 React 应用程序，我们强烈建议您考虑使用错误边界。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd31d144713626017aac95