react 组件懒加载

React 组件的懒加载是指在需要使用该组件时才进行加载，而不是在页面初始化时就将组件全部加载出来。这样可以提高页面的加载速度和性能。

在 React 中，可以使用 React.lazy() 函数进行组件的懒加载。例如：

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

这样就可以将 MyComponent 组件进行懒加载，只有在需要使用该组件时才会进行加载。同时，需要在代码中使用 `<Suspense>` 组件进行包裹，以便在组件加载时显示一些占位符或者 loading 动画。

import React, { Suspense } from 'react';

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

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

export default App;

这样就可以完成组件的懒加载。