react 中一个页面多次引用同一个组件如何实现懒加载

如果一个页面中多次引用同一个组件，可以使用 React 的 `React.lazy()` 函数和 `React.memo()` 函数实现组件的懒加载。

首先，在组件的定义处使用 `React.memo()` 函数将组件进行优化。

import React from 'react';

const MyComponent = React.memo(() => {
  // component logic
});

export default MyComponent;

接下来，在页面中引用该组件时，使用 `React.lazy()` 函数将组件进行懒加载。

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

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

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

export default App;

这样，每次引用组件时都会进行懒加载，而且由于使用了 `React.memo()` 函数，相同的组件只会被加载一次，从而减少了页面的加载时间和网络请求。