react-virtualized优化长列表的使用

一般我们在写react项目中，同时渲染很多dom节点，会造成页面卡顿, 空白的情况。为优化原生dom元素渲染长列表，我们可以使用react-virtualized组件库，且它较为全面，一般用来展示大型列表和表格数据
性能优化：1、懒渲染（常见于移动端）
2、可视区域渲染
顺便解释懒渲染，就是每次渲染一部分，等渲染的数据即将滚动完时，再渲染下面部分。其缺点，数据量大时，页面中依然存在大量dom节点，占用内存过多、降低浏览器渲染性能，导致页面卡顿 。
一般使用 于数据量不大的情况；
可视区域渲染， react-virtualized就是使用的这种
原理：只渲染页面可视区域的列表项，非可视区域的数据“完全不渲染” ，在滚动列表时动态更新列表项，也会预先加载一些数据防止白屏，适用于一次性展示大量数据的情况（大表格、微博、聊天应用等）
基本使用
1、先安装组件库 npm install react-virtualized
2、在项目入口文件index. js中导入样式文件
3、打开参考文档，看你是使用哪个组件（Grid，List），就进入哪个组件的文档
4、翻到文档最底部，将示例代码复制到项目中
5、分析示例代码，根据项目的使用、需求来修改代码