在React项目中使用react-virtualized来对长列表性能优化

1.概述

• 场景:展示大型列表和表格数据(比如:城市列表、通讯录、微博等), 会导致页面卡顿、滚动不流畅等性能问题
• 产生性能问题的原因 :大量DOM节点的重绘和重排
• 其他原因:老旧设备
• 其他问题 :移动设备耗电加快、影响移动设备电池寿命
• 优化方案: 1.懶渲染（懒加载）2. 可视区域渲染

2.懒加载

• 常见的长列表优化方案,常见于移动端
• 原理:每次只渲染一部分(比如10条数据）, 等渲染的数据即将滚动完时,再渲染下面部分
• 优点:每次渲染一部分数据,速度快
• 缺点:数据量大时,页面中依然存在大量DOM节点，占用内存过多、降低浏览器渲染性能,导致页面卡顿
• 使用场景:数据量不大的情况(比如1000条,具体还要看每条数据的复杂程度)

3.可视化区域渲染（react-virtualized）

• 原理:只渲染页面可视区域的列表项,非可视区域的数据“完全不渲染”, 在滚动列表时动态更新列表项
• 使用场景: 一次性展示大量数据的情况(比如:大表格、微博、聊天应用等)
• 

4.react-virtualized

(1) 概述

• 在项目中的应用:实现列表页面的渲染。
• react-virtualized 是React组件,用来高效渲染大型列表和表格数据。
• GitHub地址 : https://github.com/bvaughn/react-virtualized

(2)基本使用

• 安装: react16的安装

npm install react-virtualized --save

• 安装: react17版本的安装

npm install react-virtualized --legacy-peer-deps

• 在项目入口文件index.js中导入样式文件(只导入一次即可)。
• 打开文档，点击List组件，进入List的文档中。react-virtualized
• 翻到文档最底部,将示例代码拷贝到项目中。
• 分析示例代码。

(3)让List组件沾满屏幕

• 打开AutoSizer高阶组件的文档。react-virtualized/AutoSizer.md at master bvaughn/react-virtualized · GitHub ·
• 导入AutoSizer组件。
• 通过render-props模式,获取到AutoSizer组件暴露的width和height属性。
• 设置List组件的width和height属性。
• 设置页面根元素高度100% , 让List组件占满整个页面。
• 调整样式，让页面不要出现全局滚动条,避免顶部导航栏滚动。