react中懒加载实现原理

简介: react中懒加载实现原理

1. 前言

  1. 除了自己写懒加载和使用第三方懒加载之外,react也支持懒加载的
  2. ,react咋支持懒加载的? 看完写呗

2. React.lazy

  1. react中懒加载(Lazy Loading)是一种延迟加载组件或资源的技术,它可以提高应用程序的初始加载速度,只有在需要时才加载所需的组件或资源。React通过动态导入(Dynamic Import)和React的Suspense组件实现懒加载。
  2. React 16.6 版本中,新增了 React.lazy 函数,它能让你像渲染常规组件一样处理动态引入的组件

3.   动态导入

  1. 在组件中使用动态导入来引入需要懒加载的组件。
  2. 动态导入是ES6的一项功能,可以将模块作为函数调用并返回一个Promise对象。

const LazyComponent = React.lazy(() => import('./LazyComponent'));
  • 使用React.lazy()函数:

1.React.lazy()函数是React提供的用于实现懒加载的函数,它接受一个函数作为参数,该函数返回一个动态导入的Promise对象。

2.React.lazy()返回一个新的组件,该组件在需要时自动加载动态导入的组件


4. 使用Suspense组件

1.在应用程序的根组件懒加载组件父组件中,使用Suspense组件来包裹懒加载的组件,并设置fallback属性,指定在加载过程中显示的加载指示器或占位内容。

import React, { Suspense } from 'react';
const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};
  1. LazyComponent是一个需要懒加载的组件,通过React.lazy()函数进行懒加载
  2. 然后在应用程序的根组件App中使用Suspense组件来包裹LazyComponent。
  3. 在加载过程中,Suspense组件会显示fallback属性指定的加载指示器或占位内容。
  • 当应用程序渲染时,懒加载的组件将在需要时动态加载,直到加载完成后才显示在页面上。
    这样可以减少初始加载时间,提高应用程序的性能和用户体验。

5. 懒加载只适用于默认导出的组件

1.如果需要导出多个组件,则需要使用命名导出,并通过解构赋值导入所需的组件。

// 懒加载多个组件
const { Component1, Component2 } = React.lazy(() => import('./LazyComponents'));


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
118 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
6天前
|
缓存 前端开发 UED
React Suspense 懒加载详解
【10月更文挑战第18天】React Suspense 是 React 16.6 引入的新特性,主要用于处理异步数据获取和组件懒加载。本文从 Suspense 的基本概念出发,介绍了其在代码分割和数据获取中的应用,通过具体代码示例展示了如何使用 `React.lazy` 和 `Suspense` 实现组件的懒加载,并探讨了实践中常见的问题及解决方法,帮助开发者提升应用性能和用户体验。
12 1
|
26天前
|
存储 前端开发 测试技术
React Hooks 的工作原理
【10月更文挑战第1天】
|
2月前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
70 3
|
3月前
|
前端开发 算法 JavaScript
React原理之Diff算法
【8月更文挑战第24天】
|
3月前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
25 4
|
3月前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
42 6
|
3月前
|
移动开发 前端开发 JavaScript
react路由实现原理
【8月更文挑战第11天】react路由实现原理
42 1
|
3月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
33 0
|
3月前
|
开发者 搜索推荐 Java
超越传统:JSF自定义标签库如何成为现代Web开发的个性化引擎
【8月更文挑战第31天】JavaServer Faces(JSF)框架支持通过自定义标签库扩展其内置组件,以满足特定业务需求。这涉及创建`.taglib`文件定义标签库及组件,并实现对应的Java类与渲染器。本文介绍如何构建和应用JSF自定义标签库,包括定义标签库、实现标签类与渲染器逻辑,以及在JSF页面中使用这些自定义标签,从而提升代码复用性和可维护性,助力开发更复杂且个性化的Web应用。
66 0