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

相关推荐
两个西柚呀4 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H56 小时前
App开发框架调研对比
前端
桃子不吃李子6 小时前
axios的二次封装
前端·学习·axios
SteveJrong7 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~7 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发7 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii7 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack8 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好8 小时前
react中props的使用
前端·react.js·前端框架
左&耳8 小时前
完整的 React + Umi 状态体系全景图
react.js·1024程序员节