Блог

Я использую flatlist для отображения своих данных в react native, но flatlist очень медленно отображает большой объем данных, и после быстрой прокрутки он повторно отображает данные. Из-за чего мое приложение занимает много времени для отображения полных данных. Я также получил сообщение, подобное

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate

Я перепробовал все методы оптимизации плоского списка, но рендеринг плоского списка медленный. Есть предложения, как это решить?

мой компонент flatlist выглядит так

 <FlatList
     data={questionArray}
     showsVerticalScrollIndicator={false}
     renderItem={renderItem}
     keyExtractor={keyExtractor}
/>

const renderItem = useCallback(
        ({ item, index }) => {
                              ....
                             },
        []
    );

const keyExtractor = useCallback((item, index) => index.toString(), []);
 

Есть несколько шагов, которые вы можете попробовать, потому что это полностью зависит от набора данных, а также от того, как вы реализовали/использовали в своем проекте.

1. Попытайтесь сделать компонент на основе классов React.PureComponent
2. вы также можете попробовать установить removeClippedSubviews значение true .

     <FlatList removeClippedSubviews ..someOtherProps/>
    

3. Добавьте keyExtractor в свой FlatList , как это:

     <FlatList keyExtractor={keyExtractor} ... />
    

4. Добавьте onEndReached Функцию.

const [загрузчик, установщик] = useState(ложь);

 const onEndReached = (page) => {
  if (next amp;amp; !loader) {
    setPage(page   1)
  }
}

const loadData = async () => {
  setLoader(true);
  const resp = await getData();
  setLoader(false);
}



<FlatList ...someprops onEndReached={onEndReached} />
 

5. набор initialNumToRender={integer-value}
6. Нашел это :Производительность плоского списка

Может быть, это возможно с помощью «useMemo()»

    const memoizedValue = useMemo(() => renderItem, [array]);

        <FlatList
            keyExtractor={keyExtractor}
            data={array}
            renderItem={memoizedValue}
        />
      const renderItem = ({ item }) => (
         <ListItem/>
      )