Реагировать на производительность рендеринга для изображений с большим количеством изображений

Question

Я экспериментирую с React Native и должен визуализировать, казалось бы, не сложную страницу с несколькими горизонтальными плоскими списками изображений.

Выглядит примерно так:

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

Однако я заметил, чтовсякий раз, когда эта страница (компонент) монтируется (или загружается в этом отношении), происходит очень заметное зависание экрана, прежде чем компоненты полностью отображаются и пользовательский интерфейс становится функциональным.

Есть что-то, что я пропускаю / делаю неправильноили это следовало ожидать.В общей сложности загружается не менее 50 изображений (загруженных из Интернета), но при использовании FlatList загрузка должна выполняться с отложенной загрузкой, поэтому это отставание в производительности довольно странное.

Answer 1

Вы можете улучшить свою производительность различными способами.

1. Прежде всего вы можете использовать кэшированные изображения с https://github.com/kfiroo/react-native-cached-image (не забудьте добавить длинный ttl и useQueryParamsInCacheKey, еслиURL-адрес изображения имеет параметры)
2. Если вы знаете размеры изображения или отображаете в FlatList некоторые виды с изображениями внутри (и представления всегда имеют одинаковый размер), вы можете улучшить производительность с помощью getItemLayout
3. Использовать initialNumToRender в своих FlatLists
4. Вы проверяли страницу производительности ?Возможно, поток JS заполнен, и приложение должно выполнять несколько операций.Вы можете использовать InteractionManager и requestAnimationFrame для улучшения производительности.

Я создал ThreadHelper в своем приложении React Native и производительность выше, чем раньше (На 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 изображениями, и я могу быстро их отобразитьПользователь может взаимодействовать со страницей без блокировки.