react组件懒加载

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

相关推荐
Mr_Xuhhh3 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js