VirtualizedList

Base implementation for the more convenient <FlatList> and <SectionList> components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

注意事项:

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

NOTE: LayoutAnimation and sticky section headers both have bugs when used with this and are therefore not officially supported yet.

注意:removeClippedSubviews属性目前是不必要的,而且可能会引起问题。如果你在某些场景碰到内容不渲染的情况,尝试设置removeClippedSubviews={false}。我们可能会在将来的版本中修改此属性的默认值。

属性#

data?: any #

The default accessor functions assume this is an Array<{key: string}> but you can override getItem, getItemCount, and keyExtractor to handle any type of index-based data.

debug?: ?boolean #

debug will turn on extra logging and visual overlays to aid with debugging both usage and implementation, but with a significant perf hit.

disableVirtualization: boolean #

DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.

extraData?: any #

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

getItem: (data: any, index: number) => ?Item #

A generic accessor for extracting an item from any sort of data blob.

getItemCount: (data: any) => number #

Determines how many items are in the data blob.

getItemLayout?: (data: any, index: number) => {length: number, offset: number, index: number} #

horizontal?: ?boolean #

initialNumToRender: number #

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.

keyExtractor: (item: Item, index: number) => string #

maxToRenderPerBatch: number #

The maximum number of items to render in each incremental render batch. The more rendered at once, the better the fill rate, but responsiveness my suffer because rendering content may interfere with responding to button taps or other interactions.

onEndReached?: ?(info: {distanceFromEnd: number}) => void #

onEndReachedThreshold?: ?number #

onLayout?: ?Function #

onRefresh?: ?Function #

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.

onViewableItemsChanged?: ?(info: { viewableItems: Array<ViewToken>, changed: Array<ViewToken>, }) => void #

Called when the viewability of rows changes, as defined by the viewabilityConfig prop.

refreshing?: ?boolean #

Set this true while waiting for new data from a refresh.

removeClippedSubviews?: boolean #

A native optimization that removes clipped subviews (those outside the parent) from the view hierarchy to offload work from the native rendering system. They are still kept around so no memory is saved and state is preserved.

renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #

renderScrollComponent: (props: Object) => React.Element<any> #

Render a custom scroll component, e.g. with a differently styled RefreshControl.

updateCellsBatchingPeriod: number #

Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off screen. Similar fill rate/responsiveness tradeoff as maxToRenderPerBatch.

viewabilityConfig?: ViewabilityConfig #

windowSize: number #

Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.

方法#

scrollToEnd(params?: object) #

scrollToIndex(params: object) #

scrollToItem(params: object) #

scrollToOffset(params: object) #

recordInteraction() #