列表组件 VirtualizedList

列表组件VirtualizedList 介绍

FlatList和SectionList的底层实现。FlatList 和 SectionList 使用起来更方便，同时也有相对更详细的文档。一般来说，仅当想获得比 FlatList 更高的灵活性（比如说在使用 immutable data 而不是 普通数组）的时候，你才应该考虑使用 VirtualizedList。

Vritualization 通过维护一个有限的渲染窗口（其中包含可见的元素），并将渲染窗口之外的元素全部用合适的定长空白空间代替的方式，极大的改善了内存消耗以及在有大量数据情况下的使用性能。这个渲染窗口能响应滚动行为。当一个元素离可视区太远时，它就有一个较低优先级；否则就获得一个较高的优先级。渲染窗口通过这种方式逐步渲染其中的元素（在进行了任何交互之后），以尽量减少出现空白区域的可能性。

 

 

列表组件VirtualizedList特性

• 支持滚动加载（具体可以借助onEndReached的回调，做数据动态加载）
• 支持下拉刷新（借助onRefresh/refreshing属性实现）
• 支持可配置的可见性（VPV）回调（借助onViewableItemsChanged、viewabilityConfig实现）
• 滑动方向增加对Horizontal（水平）方向的支持
• 更加智能的Item以及section separators支持
• 支持Multi-conlumn（借助numColumns属性实现）
• 添加scrollToEnd，scrollToIndex和scrollToItem的方法支持
• 对Flow更加友好

 

 

列表组件VirtualizedList性能

VirtualizedList除了简化API之外，新的列表组件还具有显着的性能增强，主要的是对于任意数量的行(Item)的增加不会带着内存的增加。它主要是通过虚拟元素也就是在渲染窗口之外的元素将会被从组件结构上卸载以达到回收内存目的。这样会带来一个问题，即内部组件状态不会被保留，因此请确保你跟踪组件本身以外的任何重要状态，例如，在Relay或Redux或Flux store。 

限制渲染窗口还可以减少React和本地平台的工作量，例如View遍历。即使你渲染了最后的一百万个元素，用这些新的列表也不需要渲染所有的元素来完成遍历。比如：你可以使用scrollTolndex跳至中间位置，而无需过多渲染。

另外VirtualizedList还对调度进行了一些改进，这对应用程序的响应很有帮助。在任何手势或动画或其他交互完成后，呈现在窗口边缘的Item不会被频繁的渲染，并且渲染优先级比较低。

 

 

列表组件VirtualizedList使用

• 与ListView不同的是，渲染窗口中的所有tem在任何props改变时都会重新渲染，这在通常情况下是比较好的，因为渲染窗口的Item数量是不变的，但是如果tem比较复杂的话，你因该应确保遵循React最佳性能实践，并在适当情况下使用React.PureComponent和/或 shouldComponentUpdate来限制你的组件以及子组件的渲染次数，减少不必要的渲染以及递归渲染等。
• 如果你不需要渲染就知道内容的高度的话，可以通过getltemLayout 属性来改善用户体验，这使得通过例如滚动到具体tem更平滑。比如使用 scrollTolndex滚动到指定的ltem。
• 如果你有另一种数据类型比如immutable的list，那么使用VirtualizedList 是个不错的选择它提供一个getltem属性来让你为任何给定的index返回item数据。

 

 

列表组件VirtualizedList注意事项

• 当某行滑出渲染区域之外后，其内部状态将不会保留。请确保你在行组件以外的地方保留了数据。
• 本组件继承自 PureComponent 而非通常的 Component，这意味着如果其 props 在浅比较中是相等的，则不会重新渲染。所以请先检查你的 renderItem 函数所依赖的 props 数据（包括 data 属性以及可能用到的父组件的 state），如果是一个引用类型（Object 或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。（译注：这一段不了解的朋友建议先学习下 js 中的基本类型和引用类型。）
• 为了优化内存占用同时保持滑动的流畅，列表内容会在屏幕外异步绘制。这意味着如果用户滑动的速度超过渲染的速度，则会先看到空白的内容。这是为了优化不得不作出的妥协，而我们也在设法持续改进。
• 默认情况下每行都需要提供一个不重复的 key 属性。你也可以提供一个 keyExtractor 函数来生成 key。