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;