react组件懒加载

_处女座程序员的日常2024-03-18 19:51

使用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会自动加载并渲染懒加载的组件。