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

相关推荐
trsoliu几秒前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子4 分钟前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖5 分钟前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
良木林7 分钟前
浅谈原型。
开发语言·javascript·原型模式
qq_12498707531 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭2 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端