考虑问题

我有一个列表，这个列表里面我需要存放10000条数据，我要使得这个列表进行滑动的时候比较流畅，也就是渲染的效果ok。

对这个问题分析一下，我们知道DOM结构如果过大, 网页就会出现用户操作体验上的问题, 比如滚动, 点击操作，会导致渲染的不够及时情况发生。

解决方案

解决方案的话就是对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表。通俗的说就是我就渲染我可见的区域的组件，也就是虚拟列表，它是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。

实现虚拟列表就是在处理用户滚动时，要改变列表在可视区域的渲染部分，其具体步骤如下结合图片理解一下：

计算当前可见区域起始数据的 startIndex

计算当前可见区域结束数据的 endIndex

计算当前可见区域的数据，并渲染到页面中

计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset，并设置到列表上

计算 endIndex对应的数据相对于可滚动区域最底部的偏移位置 endOffset，并设置到列表上。

在React上就是使用react-window 和 react-virtualized是热门的虚拟滚动库，而在ReactNative中，我们可以使用Flatlist和Sectionlist组件，这两个组件呢是继承于VirtualizedLis，这个组件的思想也就是维护活动项的有限渲染窗口并用适当大小的空白空间替换渲染窗口之外的所有项，大大提高了大型列表的内存消耗和性能。这样已经能满足大多数情况下的使用，但是这个有一个问题就是当我们更快地滚动时会暂时看到空白内容。我测试了一下，大部分的软件在滑动过快的时候也就会出现加载上的情况等待加载。

所以使用Flatlist和Sectionlist组件能解决常用的长列表问题，至于Flatlist内容的更多优化，可以参考http://yangguang1029.github.io/2018/12/20/rn-improve-flatlist/