React-Native: оптимизировать обновление большого списка данными в реальном времени - PullRequest
0 голосов
/ 13 июля 2020

У меня есть большой список примерно 250+ элементов, которые вставляются в Flatlist при рендеринге, это очень медленно, но я думаю, что это управляемо. Моя настоящая проблема связана с слушателем в реальном времени, который очень активен и всегда обновляет состояние списка. возможно, 1 элемент на 100 мс. через некоторое время прослушивание данных. Получил это предупреждение Excessive number of pending callbacks: 501 и приложение стало больше задерживать отклик на касание. как я могу его оптимизировать? есть ли лучший способ загрузить большой список?

Вот мой пример кода:

    import React, { FunctionComponent, useState, useEffect, useRef } from "react";
    import { View } from "react-native"
    
        const Sample : FunctionComponent<any> = props => {
        
        // contains 250+ items
        const [list, setList] = useState<any[]>();
        
          useEffect(() => {
//updates the list everytime it catches a data
            myListener((somevalue) => setList(somevalue))
          };
        
        // very slow
        render(){
            <FlatList
                      data=[list]
                      renderItem={renderItem}
                      getItemLayout={getItemLayout}
                      initialNumToRender={initialItemRender}
                      maxToRenderPerBatch={5}
                      keyExtractor={(item, index) => item.value}
                    />
        }
        
        
        }

Это только мой пример кода. если у вас есть идея, как лучше оптимизировать список. я буду признателен

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...