【React Native】文件翻譯閱讀紀錄 - Components(組件) - VirtualizedList

by - 上午9:00

Facebook Open Source React Native


VirtualizedList

更方便的<FlatList>和<SectionList>組件的基本實現，這些組件也有更好的文檔記錄。通常，只有在需要比FlatList提供的更多靈活性時才應該使用它，例如，用於不可變數據而不是普通數組。

 虛擬化通過維護活動項的有限渲染窗口並用適當大小的空白空間替換渲染窗口外的所有項，大大提高了大型列表的內存消耗和性能。窗口適應滾動行為，如果遠離可見區域，則以低pri（在任何正在運行的交互之後）逐漸呈現項目，或者使用hi-pri以最小化看到空白空間的可能性。

 一些警告：

  • 當內容滾出渲染窗口時，不會保留內部狀態。確保在項目數據或外部存儲（如Flux，Redux或Relay）中捕獲所有數據。
  • 這是一個PureComponent，這意味著如果道具保持淺層相等，它將不會重新渲染。確保renderItem函數所依賴的所有內容在更新後作為prop（例如extraData）傳遞，而不是===，否則您的UI可能無法更新更新。這包括數據prop和父組件狀態。
  • 為了限制內存並啟用平滑滾動，內容在屏幕外異步呈現。這意味著可以比填充率更快地滾動並暫時看到空白內容。這是一個可以調整以適應每個應用程序需求的權衡，我們正在努力在幕後進行改進。
  • 默認情況下，列表在每個項目上查找關鍵支柱，並將其用於React鍵。或者，您可以提供自定義keyExtractor道具。

Props

Methods

參考

Props

renderItem

(info: any) => ?React.Element<any>
從數據中獲取項目並將其呈現到列表中

TYPEREQUIRED
functionYes

data

默認的訪問器函數假設這是一個形狀為{key：string}的對像數組，但您可以覆蓋getItem，getItemCount和keyExtractor來處理任何類型的基於索引的數據。
TYPEREQUIRED
anyYes

getItem

(data: any, index: number) => object;
用於從任何類型的數據blob中提取項目的通用訪問器。
TYPEREQUIRED
functionYes

getItemCount

(data: any) => number;
確定數據blob中的項目數。
TYPEREQUIRED
functionYes

debug

debug 將打開額外的日誌記錄和可視覆蓋，以幫助調試使用和實現，但具有顯著的性能。
TYPEREQUIRED
booleanNo

extraData

用於告知列表重新呈現的標記屬性（因為它實現了PureComponent）。如果你的任何renderItem，Header，Footer等函數依賴於數據道具之外的任何東西，請將其粘貼在此處並進行不可變處理。
TYPEREQUIRED
anyNo

getItemLayout

(
    data: any,
    index: number,
  ) => {length: number, offset: number, index: number}
TYPEREQUIRED
functionNo

initialScrollIndex

而不是從第一個項目的頂部開始，從 initialScrollIndex 開始。這將禁用“滾動到頂部”優化，該優化使第一個 initialNumToRender 項始終呈現，並立即呈現從此初始索引開始的項。需要實現 getItemLayout。

TYPEREQUIRED
numberNo

inverted

反轉滾動方向。使用-1的比例變換。
TYPEREQUIRED
booleanNo

CellRendererComponent

使用此元素渲染每個單元格。可以是React Component Class，也可以是render函數。默認使用View。
TYPEREQUIRED
component, functionNo

ListEmptyComponent

列表為空時呈現。可以是React Component Class，渲染函數或渲染元素。
TYPEREQUIRED
component, function, elementNo

ListFooterComponent

在所有項目的底部呈現。可以是React Component Class，渲染函數或渲染元素。
TYPEREQUIRED
component, function, elementNo

ListHeaderComponent

呈現在所有項目的頂部。可以是React Component Class，渲染函數或渲染元素。
TYPEREQUIRED
component, function, elementNo

onLayout

TYPEREQUIRED
functionNo

onRefresh

() => void
如果提供，將為“Pull to Refresh”功能添加標準RefreshControl。確保正確設置刷新道具。
TYPEREQUIRED
functionNo

onScrollToIndexFailed

(info: {
    index: number,
    highestMeasuredFrameIndex: number,
    averageItemLength: number,
  }) => void
用於在滾動到尚未測量的索引時處理故障。建議的操作是計算自己的偏移量並滾動它，或者盡可能滾動，然後在渲染更多項目後再試一次。
TYPEREQUIRED
functionNo

onViewableItemsChanged

(info: {
    viewableItems: array,
    changed: array,
  }) => void
當 viewabilityConfig prop 定義時，行的可見度發生變化時調用。
TYPEREQUIRED
functionNo

refreshing

在等待刷新的新數據時設置為 true。

TYPEREQUIRED
booleanNo

removeClippedSubviews

這可以改善大型列表的滾動性能。
注意：在某些情況下可能存在錯誤（缺少內容） - 使用風險自負。
TYPEREQUIRED
booleanNo

renderScrollComponent

(props: object) => element;
渲染自定義滾動組件，例如使用不同風格的 RefreshControl。
TYPEREQUIRED
functionNo

viewabilityConfig

有關流類型和更多文檔，請參閱 ViewabilityHelper.js。
TYPEREQUIRED
ViewabilityConfigNo

viewabilityConfigCallbackPairs

ViewabilityConfig / onViewableItemsChanged 對列表。當滿足相應的 ViewabilityConfig 條件時，將調用特定的 onViewableItemsChanged。有關流類型和更多文檔，請參閱 ViewabilityHelper.js。
TYPEREQUIRED
array of ViewabilityConfigCallbackPairNo

horizontal

TYPEREQUIRED
booleanNo

initialNumToRender

初始批次中要渲染的項目數。這應該足以填滿屏幕，但不是更多。請注意，這些項目永遠不會作為窗口渲染的一部分卸載，以提高滾動到頂部操作的感知性能。
TYPEREQUIRED
numberNo

keyExtractor

(item: object, index: number) => string;
用於為指定索引處的給定項提取唯一鍵。密鑰用於緩存，並作為跟踪項目重新排序的反應鍵。默認提取器檢查item.key，然後回退到使用索引，就像React那樣。
TYPEREQUIRED
functionNo

maxToRenderPerBatch

每個增量渲染批處理中要呈現的最大項目數。一次渲染得越多，填充率就越好，但是我的遭受的響應能力因為渲染內容可能會干擾對按鈕點擊或其他交互的響應。
TYPEREQUIRED
numberNo

onEndReached

(info: {distanceFromEnd: number}) => void
當滾動位置在渲染內容的onEndReachedThreshold內時調用一次。
TYPEREQUIRED
functionNo

onEndReachedThreshold

距離末尾多少（以列表的可見長度為單位）列表的下邊緣必須來自內容的末尾才能觸發onEndReached回調。因此，當內容的結尾在列表的可見長度的一半之內時，值0.5將觸發onEndReached。
TYPEREQUIRED
numberNo

updateCellsBatchingPeriod

低 pri 項目渲染批次之間的時間量，例如用於渲染項目遠離屏幕的方式。類似的填充率/響應性權衡為 maxToRenderPerBatch。
TYPEREQUIRED
numberNo

windowSize

確定在可見區域外呈現的最大項目數，以可見長度為單位。因此，如果您的列表填滿屏幕，則windowSize = {21}（默認值）將呈現可見屏幕區域以及視口上方最多10個屏幕和10個屏幕。減少此數量將減少內存消耗並可能提高性能，但會增加快速滾動可能會顯示未呈現內容的瞬間空白區域的可能性。
TYPEREQUIRED
numberNo

disableVirtualization

已過時. 虛擬化提供了顯著的性能和內存優化，但完全卸載了渲染窗口之外的實例。您應該只需要禁用它以進行調試。
TYPEREQUIRED
No

progressViewOffset

當需要偏移以使加載指示器正確顯示時設置此項。
TYPEREQUIREDPLATFORM
numberNoAndroid

Methods

scrollToEnd()

scrollToEnd(([params]: object));

scrollToIndex()

scrollToIndex((params: object));

scrollToItem()

scrollToItem((params: object));

scrollToOffset()

scrollToOffset((params: object));
滾動到列表中的特定內容像素偏移。

 Param偏移期望偏移量滾動到。在水平為真的情況下，偏移是x值，在任何其他情況下，偏移是y值。

 Param動畫（默認情況下為true）定義列表是否應在滾動時執行動畫。

recordInteraction()

recordInteraction();

flashScrollIndicators()

flashScrollIndicators();




Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , , ,

You May Also Like

0 意見