react 性能优化 之 React Lazy

最新推荐文章于 2024-03-17 10:40:02 发布
最新推荐文章于 2024-03-17 10:40:02 发布
阅读量786 收藏 9
点赞数 9
文章标签： 前端 react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69903461/article/details/135243271
版权

React Lazy 是 React 16.6 版本中引入的新功能，它能让你像常规组件一样处理动态引入的组件，配合 webpack 的 Code Splitting，只有当组件被加载，对应的资源才会导入，从而达到懒加载的效果。

1.React.lazy()函数是React提供的用于实现懒加载的函数，它接受一个函数作为参数，该函数返回一个动态导入的Promise对象。
2.React.lazy()返回一个新的组件，该组件在需要时自动加载动态导入的组件。

 

范例： 

beb9a75eef2048b99aa6085c3e8967ea.jpg

 

我很苦涩的
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-lazy-hydration:服务器渲染的React组件的惰性水化
05-04
React懒惰的水合 服务器渲染的React组件的惰性水化 安装 npm i react-lazy-hydration 或者 yarn add react-lazy-hydration 用法 import React from "react" ; import LazyHydrate from "react-lazy-hydration" ; function App ( ) { return ( < div> { /* Skip Hydrating */ } < LazyHydrate> { ... } < / LazyHydrate > { /* Requires IntersectionObserver. Polyfill not included. */ } < Lazy
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3894
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
react组件懒加载
最新发布
qq_42931285的博客
03-17 604
react组件懒加载
深入理解React：懒加载（lazy）实现原理
大灰狼的小绵羊哥哥的博客
06-19 6307
目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 （1）为什么要进行代码分割？ 现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。 而为了解决这样的问题，避
React的动态加载（lazy import）
大灰狼的小绵羊哥哥的博客
03-08 7109
1、什么是动态加载？ 动态加载即在触发事件的时候，才会去引入需要的方法和对象。 这有利于延迟请求和延迟加载方法 2、静态加载和动态加载的对比 静态加载（编译时加载）： import {add} from './moduleA' console.log(add(1,2)) 动态加载 import ('./moduleA').then(e=&gt;{console.log(e.add(1,...
react 事项懒加载的三种方法
一步一个脚印，踏实努力，向着目标前进
07-21 2115
这三种方法都可以实现组件的懒加载，具体选择哪种方法取决于个人偏好和项目需求。React.lazy()函数是React官方推荐的方法，它在React 16.6版本引入，使用起来简单方便；React Loadable库提供了更多的配置选项和灵活性；而使用动态import语法则是一种原生的方式，不需要引入额外的库。根据具体情况选择适合的方法来实现组件的懒加载。根据具体的项目需求和浏览器环境选择适合的方法来实现组件的懒加载。
【react】React.lazy
Akukudeteng的博客
08-14 5008
注意: React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。 React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。 使用之前： import OtherComponent from './OtherComponent'; 使用之后： const OtherComponent = React.lazy(() => import('
【React】路由懒加载 React.lazy()
m0_63779088的博客
08-06 1886
**路由懒加载**就是加载首页时不加载其他组件，当你点击对应的模块，才按需去加载路由对应的资源, 可以**提高加载速度，加快首页渲染** (一个页面加载过后再次访问不会重复加载)
二、【React拓展】懒加载 lazy
天行健，君子以自强不息
12-01 1707
二、【React拓展】懒加载 lazy
react懒加载lazy
sunnyjingqi的博客
10-24 449
lazy能够让你在组件第一次被渲染之前延迟加载组件的代码。
React.lazy懒加载组件
hyupeng1006的博客
10-12 928
1. React.lazy的用法 React.lazy方法可以异步加载组件文件。 const Foo = React.lazy(() => import('../componets/ChildComponent)); React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等。 <React.Suspense fallback={<div>loading...</div>}>
react-lazyload：延迟加载组件，图像或任何与性能有关的内容
02-05
支持one-time lazy load和continuous lazy load模式 scroll / resize事件处理程序的速度，可以避免频繁更新，您也可以切换到防抖模式 支持装饰器 服务器端渲染友好 经过全面测试 安装 2.0.0终于发布了，请阅读《 ，...
详解使用React.memo()来优化函数组件的性能
12-07
在React中可以用来优化组件性能的方法大概有以下几种: 组件懒加载(React.lazy(…)和) Pure Component shouldComponentUpdate(…){…}生命周期函数 本文还会介绍React16.6加入的另外一个专门用来优化函数组件...
react-use-lazy-load-image:轻松将图像延迟加载添加到您的React应用
05-02
react-use-lazy-load-image使用为延迟加载的图像提供高性能解决方案，该图像不涉及滚动事件侦听器。 IntersectionObserver API仍然很新，因此较旧的浏览器可能不支持此功能，但是对于这些用例，可以使用一些不错的...
React路由管理之React Router总结
12-11
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，最近... It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition han
React中Suspense及lazy()懒加载及代码分割原理和使用的理解
热门推荐
有问题 ! 请留言 !
04-03 1万+
React Suspense lazy() 懒加载 代码分割 code spliting Suspense和lazy()都是react中比较新的特性,在项目中使用还比较少,但是学习一下有助于在后面的项目中使用,同样可以一窥React未来的发展方向 React.lazy() 概括 顾名思义lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入 为什么需要懒加载 在React的项目中...
react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
weixin_39800387的博客
11-26 1046
React v16.6.0已经发布快一年了，为保障项目迭代发布，没有及时更新react版本，最近由于开启了新项目，于是使用新的react版本进行了项目开发。项目工程如何搭建，如何满足兼容性要求，如何规范化等等这里不作为介绍重点，这里想说一下react的lazy，suspense，这块在react官网作为code-splitting重点说明过，可见其出现的意义。官网写的比较详细，总结起来就是，如果你...
react懒加载
m0_71086463的博客
05-30 940
在 React 中，可以使用 React.lazy() 函数来实现懒加载。React.lazy() 接收一个函数作为参数，这个函数返回一个动态 import() 语句，这个语句用于加载组件的代码。React 懒加载（Lazy Loading）是指在组件需要被渲染时才加载相应的代码。这有助于减少初始页面加载时的代码量，提高页面的性能。这里的 fallback 属性指定了在组件加载过程中显示的占位符。可以根据需要自定义这个占位符。创建一个需要懒加载的组件，比如 MyComponent。
React中的路由懒加载是什么？原理是什么？
zz130428的博客
12-13 1451
React.lazy() 和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件，结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。
react h5性能优化
07-27
React H5的性能优化是开发过程中非常重要的一部分，下面是一些常见的优化策略： 1. 使用React.memo()来优化组件渲染：React.memo()可以将组件包裹起来，以减少不必要的渲染。它会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染组件。 2. 使用shouldComponentUpdate()或React.PureComponent来避免不必要的渲染：这些方法可以在组件更新之前进行比较，如果 props 或 state 没有变化，则可以阻止组件重新渲染。 3. 避免在render()方法中进行昂贵的计算或操作：render()方法应该只负责渲染组件，不应该包含复杂的计算逻辑或操作。 4. 使用React.lazy()和React.Suspense来实现按需加载：将大型组件拆分为多个小组件，并使用React.lazy()和React.Suspense实现按需加载，可以减少初始加载时间。 5. 使用Key属性来优化列表渲染：在使用map()方法渲染列表时，为每个子元素添加唯一的key属性，这样React可以更高效地更新列表。 6. 使用shouldComponentUpdate()或React.memo()来减少子组件的重新渲染：如果子组件的props没有变化，则可以通过shouldComponentUpdate()或React.memo()阻止子组件的重新渲染。 7. 使用虚拟化技术来优化大型列表的渲染：使用React-virtualized或react-window等库可以只渲染可见区域内的列表项，以提高性能。 8. 使用性能分析工具来找出性能瓶颈：使用React DevTools或Chrome DevTools等工具可以帮助你分析组件的渲染性能，找出潜在的性能问题。 以上是一些常见的React H5性能优化策略，你可以根据具体情况选择合适的方法来提升应用的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值