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）基本使用
①安装:
npm install react-virtualized --save
②在项目入口文件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组件占满整个页面。
⑥调整样式，让页面不要出现全局滚动条,避免顶部导航栏滚动。
