React中的动态导入允许您在运行时动态加载JavaScript模块,这可以显著改善应用程序的性能和加载时间。这种技术对于代码拆分和延迟加载特别有用,可确保只在需要时加载必要的代码。

***import()函数返回一个Promise,该Promise解析为您要使用的动态导入模块。***

***在JavaScript中进行普通导入(使用import语句)不会返回Promise。这是一个同步操作,并返回从导入的模块导出的值。***

import React from 'react';

const AnotherComponent = () => {
  return <div>Another component loaded dynamically!</div>;
};

export default AnotherComponent;

const MyComponent = () => {
  const [importedComponent, setImportedComponent] = useState(null);  

  useEffect(() => {
    const importComponent = async () => {
      const module = await import('./AnotherComponent');
      const AnotherComponent = module.default;
      setImportedComponent(<AnotherComponent />);
    };
    
    importComponent();
  }, []);

  return (
    <div>
      {importedComponent}
      <div>This is my functional component!</div>
    </div>
  );
};

///另一种方式是...///

const MyComponent = async () => {
  const module = import('./AnotherComponent');
  const {AnotherComponent} = await module;
  return <AnotherComponent />; 
};

export default MyComponent;

// 当您控制台导出模块时,{ default: ""} 包含函数名称作为键
// 和定义作为值的所有键值对,使用 default 键如果某些内容
// 默认导入,则它的值为默认值,否则为 undefined

何时使用动态导入?

尽管动态导入是改进 React 应用程序性能的好方法,但在 React 应用程序中使用动态导入有更好的用例。

- 代码调制:当需要从服务器获取数据时,可以使用动态导入进行代码调制。可以在服务器端渲染的应用程序中找到示例。

- 当应用程序仍在加载时,如果不需要组件,可以使用动态导入。

- 条件导入是动态导入的一个绝佳用例;在此,模块或组件仅在需要它们的页面上导入,并在应用程序中需要它们时导入。

React.lazy()

React.lazy() 函数允许您将动态导入渲染为常规组件。基本上,React.lazy() 发出对动态导入的调用并返回一个 promise。

import React, { lazy } from "react";

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

# React.Suspense()

React.Suspense 允许 React 开发人员有条件地暂停 React 组件的渲染,直到它被加载。React.Suspense 提供了一个 fallback 属性,它接受一个 React 元素,可以是 JSX 代码段或 React 组件。

当用户访问使用 React 动态导入的页面时,他们通常会经历空白页面屏幕,这是在应用程序加载模块时完成的,这也会导致由于某些用户的网络连接速度慢而导致错误。 React.lazy() 和 React.Suspense 结合可为用户解决此问题。

为此,使用 React.Suspense 暂停渲染组件,直到懒加载所有依赖项,React.Suspense 还将为用户显示回退 UI。

import React, { Suspense } from 'react';

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

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

export default App;