react 组件懒加载

React 组件懒加载是一种优化技术，它可以让页面在加载时只加载首屏需要的组件，而其它组件则在需要时再进行加载。这样可以减少首屏加载时间，提高页面性能和用户体验。

React 官方提供了 `React.lazy()` 方法进行组件懒加载。使用方法如下：

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

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

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

这里通过 `React.lazy()` 方法懒加载 `MyComponent` 组件，当组件需要被渲染时，React 会自动加载该组件。同时，为了避免组件加载时间过长导致页面空白，我们使用 `Suspense` 组件设置了一个加载中的提示。