Reactjs 对于具有大量图像的视图，反应本机渲染性能

我正在尝试React Native，并且必须呈现一个看似不复杂的页面，其中包含多个图像的水平平面列表

看起来像这样：

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

render（）{
返回(
);
}

然而，我注意到，每当该页面（组件）被挂载（或为此而加载）时，在组件完全呈现和UI开始工作之前，都会有一个非常明显的屏幕冻结

---

我是否遗漏了什么/做错了什么，或者这是意料之中的事。总共至少有50个以上的图像（从web加载），但使用FlatList时，它应该是延迟加载的，因此这种性能滞后是非常奇怪的。

您可以通过不同的方式提高性能

首先，您可以将缓存的图像用于 ）别忘了 如果图像url已更改，请添加长ttl和useQueryParamsInCacheKey 参数）

如果您知道图像尺寸，或者正在平面列表中显示一些内部有图像的视图（且视图的大小始终相同），则可以使用

在平面列表中使用

你检查过房间了吗？可能JS线程已满，应用程序必须执行多个操作。您可以使用和来提高性能

我在React原生应用程序中创建了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多个图像，我可以快速显示它们。用户可以在不被阻止的情况下与页面进行交互。

尝试设置initialNumToRender等配置，并尝试实现无限滚动，而将所有数据加载到upfrontFlatList确实会使用延迟加载，但您使用的是多个FlatList。使用滚动视图可能会更好