在React项目中，如何优雅的优化长列表
对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。
贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表
- 原生dom渲染长列表的缺陷
- 虚拟列表优化长列表的原理
- 通过react-virtualized来优化长列表
- 通过react-tiny-virtual-list来优化长列表
本文的原文地址发布在我的博客中：
https://github.com/forthealll...
欢迎star和fork～
本文的用例的代码地址为：
https://github.com/forthealll...
一、原生dom渲染长列表的缺陷
首先我们尝试在React项目中，未做任何优化一次性渲染1000个dom，每个dom包含一个img标签，原生dom本身是很复杂的对象，加上img标签后。渲染的效果如下图所示：
可以很明显的看到白屏的时间很长，因为在React中，不做任何优化，直接渲染这么包含1000个图片的dom节点，即使React本身用了虚拟dom，但是在首次渲染的时候，是实实在在的生成了1000个真实的dom，我们可以查看网页中的真实dom情况，如下所示：
从上图我们可以看出，是确确实实的生成了1000个真实的dom，进入页面后，需要渲染这1000个dom，因此白屏的时间很长。
此外，在直接渲染1000个dom节点的页面，触发滚动事件，也会使得内存用量增加，具体可以如下图所示：
此外同时渲染很多dom节点，也会造成一下几个问题：
- 容易失帧，因为渲染很慢，所以无法维持浏览器的帧率，主观上会显得页面卡顿
- 网页失去响应，事件等无法及时被触发
上述的效果都是在PC端展示的，对于特定的移动设备，直接无优化的渲染长列表所造成的问题会更加的放大。长列表的渲染在移动端的很多场景会遇到，比如微博，feeds流中等等。合理的优化长列表，可以提升用户体验。
二、虚拟列表优化长列表的原理
优化长列表的原理很简单，基本原理可以一句话概括：
用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。
具体实现步骤如下所示：
- 首先确定长列表所在父元素的大小，父元素的大小决定了可视区的宽和高
- 确定长列表每一个列表元素的宽和高，同时初始的条件下计算好长列表每一个元素相对于父元素的位置，并用一个数组来保存所有列表元素的位置信息
- 首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。
- 假设可视区内能展示5个子列表元素，及时长列表总共有1000个元素，但是每时每刻，真实渲染出来的dom节点只有5个。
5.补充说明，这种情况下，父元素一般使用position：relative，子元素的定位一般使用：position：absolute或sticky
通过虚拟列表优化后，同样的显示1000个包含图片的dom，白屏时间会大大的减少。具体效果如下图所示：
对于比无优化的情况，优化后的虚拟列表渲染速度提升很明显。
三、通过react-virtualized来优化长列表
社区实现虚拟列表的React组件很多，较为常用的是react-virtualized和react-tiny-virtual-list，前一个较为全面，第二个较为轻量。接下来会分别来介绍这俩个React组件库。
1、react-virtualized简介
react-virtualized是一个实现虚拟列表较为优秀的组件库，react-virtualized提供了一些基础组件用于实现虚拟列表，虚拟网格，虚拟表格等等，它们都可以减小不必要的dom渲染。此外还提供了几个高阶组件，可以实现动态子元素高度，以及自动填充可视区等等。
react-virtualized的基础组件包含：
- Grid：用于优化构建任意网状的结构，传入一个二维的数组，渲染出类似棋盘的结构。
- List：List是基于Grid来实现的，但是是一个维的列表，而不是网状。
- Table：Table也是基于Grid来实现，表格具有固定的头部，并且可以在垂直方向上滚动
- Masonry：同样可以在水平方向，也可以在垂直方向滚动，不同于Grid的是可以自定义每个元素的大小，或者子元素的大小也可以是动态变化的
- Collection：类似于瀑布流的形式，同样可以水平和垂直方向滚动。
值得注意的是这些基础组件都是继承于React中的PureComponent，因此当state变化的时候，只会做一个浅比较来确定重新渲染与否
。
除了这几个基础组件外，react-virtualized还提供了几个高阶组件，比如ArrowKeyStepper
、AutoSizer、CellMeasurer、InfiniteLoader等，本文具体介绍常用的AutoSizer、CellMeasurer和InfiniteLoader。
- AutoSizer：使用于一个子元素的情况，通过AutoSizer包含的子元素会根据父元素Resize的变化，自动调节该子元素的可视区的宽度和高度，同时调节的还有该子元素可视区真实渲染的dom元素的数目。
- CellMeasurer：这个高阶组件可以动态的改变子元素的高度，适用于提前不知道长列表中每一个子元素高度的情况。
- InfiniteLoader：这个高阶组件用于Table或者List的无限滚动，适用于滚动时异步请求等情况
2、react-virtualized基础组件的使用
下面我们来介绍一下常用的基础组件Grid、List。
(1)Grid
所有基础组件基本上都是基于Grid构成的，一个简单的Grid的例子如下：
import { Grid } from 'react-virtualized';
const list = [
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU']
];
function cellRenderer ({ columnIndex, key, rowIndex, style }) {
return (
<div
key={key}
style={style}
>
{list[rowIndex][columnIndex]}
</div>
)
}
render(
<Grid
cellRenderer={cellRenderer}
columnCount={list[0].length}
columnWidth={100}
height={300}
rowCount={list.length}
rowHeight={80}
width={300}
/>,
rootEl
);显示的效果如下图所示：
渲染网格也是只渲染可视区的dom节点，有个有趣的现象是滚动条的大小，这里Grid做了一个细节优化，只有滚动的时候才会显示滚动条，停止滚动后会隐藏滚动条。
(2)List
接着来举例说明一下List的使用：
import { List } from 'react-virtualized';
import loremIpsum from "lorem-ipsum"
const rowCount = 1000;
const list = Array(rowCount).fill().map(()=>{
return loremIpsum({
count: 1,
units: 'sentences',
sentenceLowerBound: 3,
sentenceUpperBound: 3
}
})
function rowRenderer ({
key,
index,
isScrolling,
isVisible,
style
}) {
return (
<div
key={key}
style={style}
>
{list[index]}
</div>
)
}
export default class TestList extends Component{
render(){
return <div style={{height:"300px",width:"200px"}}>
<List
width={300}
height={300}
rowCount={list.length}
rowHeight={20}
rowRenderer={rowRenderer}
/>
</div>
}
}List的使用方法也是极简，指定列表总条数rowCount，每一条的高度rowHeight以及每次渲染的函数rowRenderer，就可以构建一个渲染列表。具体的效果如下图所示：
2、react-virtualized高阶组件的使用
结合List来看看react-virtualized高阶组件的使用。
(1)AutoSizer
首先来看使用不使用AutoSizer的缺点，如下图所示，List只能指定固定的大小，如果其所在的父元素的大小resize了，那么List是不会主动填满父元素的可视区的：
从上图可以看出来，List是无法自动填充父元素的。因此我们这里需要使用AutoSizer。AutoSizer的使用也很简单，我们只需要在List的基础上：
class TestList extends Component{
render(){
return <div>
<AutoSizer>
{({ height, width }) => (
<List
height={height}
rowCount={list.length}
rowHeight={20}
rowRenderer={rowRenderer}
width={width}
/>
)}
</AutoSizer>
</div>
}
}效果如下图所示：
上述可以看出来增加了AutoSizer可以动态的适应父元素宽度和高度的变化。
但是也存在一个问题：
子元素太长，换行后改变了子元素的高度后无法子适应，也就是说仅仅通过基础的组件List是不支持子元素的高度动态改变的场景。
(2)CellMeasurer
为了解决上述的子元素可以动态变化的问题，我们可以利用高阶组件CellMeasurer：
import { List,AutoSizer,CellMeasurer, CellMeasurerCache} from 'react-virtualized';
const cache = new CellMeasurerCache({ defaultHeight: 30,fixedWidth: true});
function cellRenderer ({ index, key, parent, style }) {
console.log(index)
return (
<CellMeasurer
cache={cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
<div
style={style}
>
{list[index]}
</div>
</CellMeasurer>
);
}对于需要渲染的List，如下所示：
class TestList extends Component{
render(){
return <div>
<AutoSizer>
{({ height, width }) => (
<List
height={height}
rowCount={list.length}
rowHeight={cache.rowHeight}
deferredMeasurementCache={cache}
rowRenderer={cellRenderer}
width={width}
/>
)}
</AutoSizer>
</div>
}
}最后的结果如下所示：
上图我们看出来，子列表元素的高度可以动态变化，通过CellMeasurer可以实现子元素的动态高度。
(3)InfiniteLoader
最后我们来考虑这种无限滚动的场景，很多情况下我们可能需要分页加载，就是常见的在可视区内无限滚动的场景。react-virtualized提供了一个高阶组件InfiniteLoader用于实现无限滚动。
InfiniteLoader的使用很简单，只要按着文档来即可，就是分页的去在家下一页，滚动分页所调用的函数为：
function loadMoreRows ({ startIndex, stopIndex }) {
return new Promise(function(resolve,reject){
resolve()
}).then(function(){
//模拟ajax请求
let temList = Array(10).fill(1).map(()=>{
return loremIpsum({
count: 1,
units: 'sentences',
sentenceLowerBound:3,
sentenceUpperBound:3
})
})
list = list.concat(temList)
})
}最后的效果如下：
看起来跟基础组件List一样，其实唯一的区别就是会在滚动的时候自动执行loadMoreRows函数去更新list
(4)总结
通过基础组件Grid、List以及高阶组件AutoSizer、CellMeasurer和InfiniteLoader，已经可以构建出比较复杂的场景，但是有一个缺陷，就是CellMeasurer虽说一定程度上支持动态子元素的高度的变化，其实是一种估算，存在很多边界情况，无法适应于动态元素的场景，特别是文本节点较多导致的高度变化。但是对于图片节点的动态高度支持没有很大的问题。
举例一种边界情况，CellMeasurer无法支持文本动态高度的情况：
从上图可以看到，慢慢缩小的过程中，如果缩的太小，并没有动态的撑大子元素的高度，出现了文字的重叠。
四、通过react-tiny-virtual-list来优化长列表
react-tiny-virtual-list是一个较为轻量的实现虚拟列表的组件，不同于react-virtualized支持网格以及表格等渲染优化。
react-tiny-virtual-list只支持列表，使用方便，其源码也只有700多行。
使用极其简单：
import VirtualList from 'react-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F','A', 'B', 'C',
'D', 'E', 'F','A', 'B', 'C', 'D', 'E', 'F',
'A', 'B', 'C', 'D', 'E', 'F'];
export default class TinyVirtual extends Component {
render(){
return <VirtualList
width='100%'
height={200}
itemCount={data.length}
itemSize={50} // Also supports variable heights (array or function getter)
renderItem={({index, style}) =>
<div key={index} style={style}>
// The style property contains the item's absolute position Letter: {data[index]}, Row: #{index}
</div>
}
/>
}
}最后的渲染结果也是相似的，也可以支持无限滚动等等。
但是react-tiny-virtual-list有一个致命的缺点：
完全不支持子元素的动态高度或者宽度
五、总结
本文介绍了虚拟列表的优化的原理，以及常用的React可以优化虚拟列表的组件库。在接下来的文章中，会具体的介绍react-tiny-virtual-list和react-virtualized的源码，敬请期待。