66问答网
所有问题
react长列表优化方案 / react-virtualized使用
如题所述
举报该问题
其他回答
第1个回答 2022-07-20
在展示大型列表和表格数据, 如: 城市列表、通讯录、微博等,会导致页面不流畅、卡顿等性能问题。
原因: 大量的DOM节点的重绘和重排,设备老旧;导致移动设备耗电耗电加快,设备发热。
优化方案: 1.懒渲染 2. react-virtualized (可视区域渲染)
优点: 每次渲染一部分数据,数据块
缺点: 等数据量加载到非常多时,页面依然存在大量DOM节点,占用内存过多、降低浏览器性能;
github:
https://github.com/bvaughn/react-virtualized
install: npm install react-virtualized
列表组件文档:
https://github.com/bvaughn/react-virtualized
/blob/master/docs/List.md
接下来需要导入AutoSizer组件让list组件占满屏幕
AutoSizer组件是通过render-props模式暴露width和height属性,将暴露的width&height设置给list组件,设置页面的根元素高度100%,让list占满页面。再减去导航栏的高度,让页面不要出现全局滚动条,避免顶部导航栏滚动。
AutoSizer组件文档:
https://github.com/bvaughn/react-virtualized
/blob/master/docs/AutoSizer.md
相似回答
react
一个页面多个组件、如何分批渲染,优先可视化范围内的
答:
具体实现方法如下:1、
使用React
.lazy()和Suspense组件:React.lazy()是React16.6版本中引入的新特性,可以实现动态加载组件。通过React.lazy()可以将组件按需加载,只有在组件被访问时才会加载。可以使用Suspense组件来实现组件的异步加载和占位符的显示。2、
使用react-virtualized
库:react-virtualized是一款...
使用react
-window构造虚拟
列表
(性能
优化
)
答:
1、不用全部加载出所有的DOM节点。默认只渲染可视区域及可视区域外的一个节点,此属性可自定义设置。2、可用于处理大型数据
列表
。当
使用
在大型数据列表中,可避免因为数据的更新而导致大量的重新渲染。使用AutoSizer可是列表宽高为当前父组件的100 在使用VariableSizeList 会遇到列表项样式缓存没有被清除导致...
React
性能
优化
指南
答:
使用React
开发的项目,可以从加载性能和运行时性能两个方面进行
优化
。加载性能优化的目标是让用户更早地看到界面、更早地和应用交互。运行时性能优化目标是降低卡顿,交互更流畅 。我们知道
React的
setState会触发diff和更新。默认是将整个组件树进行对比,但很多情况下diff是不必要的,因为一个子组件的props...
如何
优化
整个
react
项目?
答:
优化
React 项目的方法有很多,以下是一些常见的方法:1.
使用
key 属性来提高组件的性能。在
React 中
,key 属性可以帮助 React 识别哪些元素发生了变化,从而提高渲染性能。2. 使用懒加载来减少初始加载时间。懒加载是一种只在需要时才加载组件的技术,可以减少初始加载时间。3. 使用 CDN 来加速资源...
用
react
实现虚拟滚动组件
答:
这里需要截取 listDom ,
使用
slice() 方法。截取起始位置为 currentIndex ,结束为止为 currentIndex + domCount 在这里我们会发现,
列表
上只有7个元素,且无法滚动 我们还没有给元素绑定滚动事件。这里我们将上述计算逻辑提到一个函数中进行,并将其绑定scroll 绑定事件后发现还是无法滚动...原来我们还...
React
-Native 数据存储之
react
-native-storage的简单
使用
答:
首先导入组件 import Storage from '
react
-native-storage'; 创建一个全局的 Storage :注意 storage.sync 的设置放在了创建方法的外面,是因为 RNAsyncStorage_asyn 文件中
使用
了 storage ,(如果放在创建方法里面, RNAsyncStorage_asyn 中的 storage 将因为尚未导出 storage 而出现错误)这里解释下 sy...
大家正在搜
reactnative长列表优化
react native性能优化
react性能优化方法
react-native
react 性能优化
react redux
react项目如何优化
react白屏优化
react列表渲染