在React项目中，怎样文雅的优化长列表

  关于较长的列表，比方1000个数组的数据构造，假如想要同时衬着这1000个数据，天生相应的1000个原生dom，我们晓得原生的dom元素是很庞杂的，假如长列表经由过程天生云云多的dom元夙来完成，很能够使网页落空相应。

  贯串React中心的就是&＃8221;virtual dom&＃8221;,我们一样的能够经由过程用假造列表的体式格局来文雅的优化长列表

• 原生dom衬着长列表的瑕玷
• 假造列表优化长列表的道理
• 经由过程react-virtualized来优化长列表
• 经由过程react-tiny-virtual-list来优化长列表

本文的原文地点宣布在我的博客中：

https://github.com/forthealll&＃8230;

迎接star和fork～

本文的用例的代码地点为：

https://github.com/forthealll&＃8230;

一、原生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大小以及一切列表元素的位置，盘算在可视区应当衬着哪些元素。

详细完成步骤以下所示：

1. 起首肯定长列表地点父元素的大小，父元素的大小决议了可视区的宽和高
2. 肯定长列表每一个列表元素的宽和高，同时初始的条件下盘算好长列表每一个元素相关于父元素的位置，并用一个数组来保留一切列表元素的位置信息
3. 初次衬着时，只展现相关于父元素可视区内的子列表元素，在转动时，依据父元素的转动的offset从新盘算应当在可视区内的子列表元素。如许保证了无论如何转动，实在衬着出的dom节点只要可视区内的列表元素。
4. 假定可视区内能展现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 (
key={key}
https://img8.php1.cn/3cdc5/15579/978/f1a5a98c436a29cd.gif" src="https://img8.php1.cn/3cdc5/15579/978/f1a5a98c436a29cd.gif" alt="《在React项目中，怎样文雅的优化长列表》" />

衬着网格也是只衬着可视区的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 (
key={key}
300px",width:"200px"}}>
https://img8.php1.cn/3cdc5/15579/978/786b3cb4901e8027.gif" src="https://img8.php1.cn/3cdc5/15579/978/786b3cb4901e8027.gif" alt="《在React项目中，怎样文雅的优化长列表》" />

2、react-virtualized高阶组件的运用

连系List来看看react-virtualized高阶组件的运用。

(1)AutoSizer

起首来看运用不运用AutoSizer的瑕玷，以下图所示，List只能指定牢固的大小，假如其地点的父元素的大小resize了，那末List是不会主动填满父元素的可视区的：

从上图能够看出来，List是没法自动添补父元素的。因而我们这里须要运用AutoSizer。AutoSizer的运用也很简朴，我们只须要在List的基本上：

class TestList extends Component{
render(){
return