使用React.lazy()函数:
React.lazy()函数是React 16.6版本引入的新特性,可以用于懒加载组件。它接受一个函数作为参数,该函数需要动态地调用import()函数来加载组件。使用React.lazy()函数懒加载组件时,组件会被自动包装成一个React懒加载组件。
javascript
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<h1>Lazy Loading Example</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
export default App;
说明:
-
首先,使用React.lazy()函数来懒加载组件。传入的参数是一个函数,该函数通过import()动态加载组件。
-
在组件中,使用Suspense组件来包裹懒加载的组件,并设置fallback属性为一个加载中的提示,当组件加载时会显示该提示。
-
当组件被需要时,React会自动加载并渲染懒加载的组件。