在ReactJS中，组件的渲染是通过Virtual DOM实现的。当组件的状态或属性发生变化时，React会重新计算Virtual DOM并对比前后两个Virtual DOM之间的差异，然后只对差异部分进行更新，以提高性能和渲染效率。
但是，有些组件可能需要进行异步渲染，例如需要从服务端获取数据或执行一些复杂的计算等操作。如果这些操作耗时较长，那么同步的渲染方式可能会导致UI界面卡顿甚至无响应，给用户带来不好的使用体验。
因此，React提供了一种异步渲染的机制，可以使得组件在异步任务完成之前不进行渲染，从而避免了UI界面的卡顿和无响应问题。
React.lazy 和 Suspense
React.lazy和Suspense是React16.6版本中新增的特性，用于实现组件的异步渲染。
React.lazy是一个高阶函数，用于按需加载组件。它接受一个函数作为参数，该函数返回一个动态import语句，用于加载组件。
const MyComponent = React.lazy(() => import('./MyComponent'));上面的代码中，MyComponent被包装在React.lazy函数中，表示该组件将会被异步加载。当需要渲染该组件时，React会自动进行异步加载操作，并在加载完成后进行渲染。
但是，在异步加载完成之前，页面上可能会出现一些不必要的UI界面，因此需要使用Suspense组件来包裹需要异步加载的组件，并设置fallback属性为一个loading状态的组件，以便在异步加载完成之前显示加载指示器或默认UI界面。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ----------- - ------------- -- -------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
------------ --
-----------
------
--
-上面的代码中，App组件使用Suspense组件包裹了MyComponent组件，并设置fallback属性为一个Loading...文字。当需要渲染MyComponent组件时，React会自动进行异步加载操作，并在加载完成后进行渲染。如果异步加载过程中需要等待，就会显示fallback属性指定的loading指示器。
React.lazy 和 Error Boundary
由于异步加载操作可能会失败，因此需要使用Error Boundary来捕获和处理组件加载过程中的错误。Error Boundary是一种用于处理组件错误的特殊组件，可以捕获子组件抛出的异常，并显示错误提示信息或默认UI界面。
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - --------- ----- --
-
------ ------------------------------- -
-- --------------
------ - --------- ---- --
-
------------------------ ---------- -
-- --------------------
-------------------- -----------
-
-------- -
-- --------------------- -
-- ------
------ --------- --------- ---- ------------
-
------ --------------------
-
-上面的代码中，定义了一个ErrorBoundary组件，用于处理子组件抛出的异常。当子组件发生异常时，ErrorBoundary会捕获该异常，并根据需要更新state以显示错误UI。
为了使用ErrorBoundary组件，需要将它作为父组件包裹在异步加载的组件周围。
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
const ErrorBoundary = ...; // 定义ErrorBoundary组件
function App
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14664) ，转载请注明来源
[https://www.javascriptcn.com/post/14664](https://www.javascriptcn.com/post/14664)