React.lazy()如何使用

React.lazy()是一个React组件，它可以让你懒加载（延迟加载）一个组件。这对于优化应用程序的性能非常有用，因为它允许你在需要时才加载组件，而不是在应用程序启动时一次性加载所有组件。

使用React.lazy()非常简单。你只需要按照以下步骤：

1. 导入React.lazy()和Suspense组件：

import React, { lazy, Suspense } from 'react';

2. 使用React.lazy()加载组件。你需要传递一个函数，该函数返回一个动态import()语句：

const MyComponent = lazy(() => import('./MyComponent'));

这将告诉React在需要时按需加载MyComponent组件。请注意，你需要传递组件的相对路径。

3. 在你的代码中使用MyComponent组件时，使用Suspense组件包装它：

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

这将告诉React在加载MyComponent组件时，在组件准备好之前显示一个加载中的消息。在这个示例中，加载中的消息是一个简单的文本字符串。

请注意，fallback属性接收一个React元素作为其值。这个元素是在加载组件时显示的。

现在，当你的应用程序需要使用MyComponent组件时，它将自动按需加载。