react长列表优化方案 / react-virtualized使用

发布网友发布时间：2022-11-16 07:08

共1个回答

热心网友时间：2024-12-02 13:51

在展示大型列表和表格数据, 如: 城市列表、通讯录、微博等，会导致页面不流畅、卡顿等性能问题。
原因: 大量的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