對具有大量圖像的視圖反應本機渲染性能

Question

我正在使用React Native進行實驗，並且不得不渲染一個看似不復雜的頁面，其中包含圖像的多個水平FlatList。

看起來像這樣：

render() {
    return (
        <View>
            <CustomImagesFlatListView data={data1} />
            <CustomImagesFlatListView data={data2} />
            <SomeOtherComponent />
            <CustomImagesFlatListView data={data3} />
        </View>
    );
}

但是，我注意到，每當該頁面（組件）被安裝（或為此加載）時，在完全呈現組件並使UI起作用之前，屏幕就會出現非常明顯的凍結。

有什么我想念/做錯的事嗎？ 總共至少有50張以上的圖像（從Web加載），但是通過使用FlatList應該將其延遲加載，因此這種性能上的滯后是很奇怪的。

Answer 1

您可以通過不同的方式來提高性能。

1. 首先，您可以將緩存的圖像與https://github.com/kfiroo/react-native-cached-image一起使用 （如果圖像URL中包含參數，請不要忘記添加長ttl和useQueryParamsInCacheKey）
2. 如果您知道圖像的尺寸，或者在FlatList中顯示了一些帶有內部圖像的視圖（並且這些視圖始終具有相同的大小），則可以使用getItemLayout來提高性能
3. 使用initialNumToRender在FlatLists
4. 您是否查看了性能頁面 ？ 也許JS線程已“滿”，並且該應用程序必須執行多項操作。 您可以使用InteractionManager和requestAnimationFrame來提高性能。

我在我的React Native應用程序中創建了一個ThreadHelper，性能比以前更好（提高了90％）。 這是代碼：

import {InteractionManager } from 'react-native';

export default class ThreadHelper{

    /**
    * Promise resolved as soon as the requestAnimationFrame goes on
    */
    nextFrame(){
        return new Promise((resolve, reject) => {
                requestAnimationFrame(() => {
                LOG.debug("ThreadHelper :: requestAnimationFrame");
                resolve();
            }); 
        })
    }


    runWhenThreadIsReady(callback){
        InteractionManager.runAfterInteractions(async () => {
            LOG.debug("ThreadHelper :: runAfterInteractions...");
            await this.nextFrame();
            callback();
        });
    }
}

您可以在組件中導入ThreadHelper，並且在檢索圖像時可以調用：

this.threadHelper.runWhenThreadIsReady(() => {
   //your code here
   //For example getImagesFromEndpoint and then this.setState({images:Array});
});

在我的應用程序中，我有多個圖像畫廊，每個畫廊有100多個圖像，並且可以快速顯示它們。 用戶可以與頁面進行交互而不會被阻止。