VirtualizedList：您有一個很慢的更新列表

我使用了大量項目的FlatList。我從XDE世博會得到了以下警報。VirtualizedList：您有一個很慢的更新列表

VirtualizedList：你有一個大名單是更新緩慢 - 讓確保您renderItem功能使得隨後作出反應一樣PureComponent，shouldComponentUpdate，等{「DT」性能的最佳實踐組件：13861，」 prevDt「：1498372326027，」contentLength「：6624}

我對我的FlatList例如PureComponent使用了一些優化方法，但我仍然得到這個警報。在我描述優化之前，你能告訴我這個警報是否總是出現，儘管FlatList是優化的嗎？或者它可能表明了性能方面的實際問題？我問，因爲我的FlatList的表現很好。

來源

2017-06-25 Przemek Piechota

我經常得到這樣的開發模式下，我認爲的原因是在這種情況下所做的所有其他檢查。 – raarts

嗨拉布，感謝評論，實際上我也得到它，當我不在開發模式在世博會。 –

你能解決這個問題嗎？ – crawler

我以前看到這個錯誤。優化我的代碼後，我不再看到它。我通過將console.log（）語句添加到創建FlatList的Component的render（）函數以及呈現List中的每個項目的函數中找到了此問題。我注意到我的代碼以前重新呈現整個FlatList及其所有項目，只要該頁面上的任何組件發生狀態更改（即使是與FlatList無關的組件）。我通過將各種組件轉換爲PureComponents來解決此問題。這裏是我的FlatList聲明看起來是這樣的：

<FlatList 
    ref={(ref) => { this.flatListRef = ref; }} 
    data={allPosts} 
    initialNumToRender={7} 
    renderItem={({ item }) => 
     <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} /> 
    } 
    />

注意到，我回來了，這是一個純粹的成分：

import React, { PureComponent } from 'react'; 
class Post extends PureComponent { 

    render() { ... } 
}

這確保了FlatList重新呈現一個只有在職位變動。當我以前傳遞一個正常功能renderItem即，做了這樣的功能：

return (
    <View> 
    ... 
    </View> 
);

我注意到FlatList重新渲染的所有項目，只要任何一項改變。現在，通過使用PureComponent，FlatList只會呈現添加到列表中的新項目（如果列表已被顯示）。

第一次渲染整個列表仍需要相對較長的時間。然而，initialNumToRender確保屏幕幾乎立即被填滿（而剩餘的項目在後臺呈現）。更重要的是，在最初的渲染之後，FlatList一次只能渲染一個項目（項目發生變化）。

我發現this post非常有幫助）。

我剛剛意識到這也解釋了here

來源

2017-09-21 16:44:48 Kes115

VirtualizedList：您有一個很慢的更新列表

回答

相關問題