Использование FlatList и VirtualizedList для больших списков

Почему длинные списки могут быть проблемой?

Представьте, что мы разрабатываем мобильное приложение, которое отображает новостную ленту, каталог товаров или список постов в соцсети. Если в вашем списке всего 10 элементов, всё работает плавно. Но что, если их становится 1000? Или 10 000? В какой-то момент вы заметите, что приложение становится медленным: скроллинг замедляется, устройство нагревается, а пользователь уже начинает думать, что пора удалить ваше приложение.

Длинные списки нагружают приложение сразу по нескольким направлениям:

• Рендеринг всех элементов одновременно. Если каждый элемент списка создаётся и выводится сразу, это значительно замедляет работу.
• Потребление памяти. Если вы храните все элементы в памяти, это быстро исчерпает доступные ресурсы.
• Обновление данных. Обновление состояния или ререндеринг всего списка может занять много времени.

Но не переживайте! React Native предоставляет инструменты, которые помогают справляться с этими проблемами: FlatList и VirtualizedList.

FlatList: базовое решение для длинных списков

FlatList — это компонент React Native, специально оптимизированный для работы с длинными списками. Его главное преимущество в том, что он рендерит только те элементы, которые видимы на экране, а не весь список целиком. Это называется виртуализацией.

Основные свойства FlatList

Прежде чем углубиться в примеры, давайте разберём несколько важных пропсов FlatList:

• data — массив данных, который нужно отобразить.
• renderItem — функция, которая описывает, как рендерить каждый элемент.
• keyExtractor — функция, которая возвращает уникальный ключ для каждого элемента.
• onEndReached — колбэк, вызываемый при приближении к концу списка (например, для подгрузки данных).

Использование FlatList

Давайте создадим новостную ленту с использованием FlatList:

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

// Пример данных
const newsData = [
  { id: '1', title: 'Заголовок 1', description: 'Текст новости 1' },
  { id: '2', title: 'Заголовок 2', description: 'Текст новости 2' },
  { id: '3', title: 'Заголовок 3', description: 'Текст новости 3' },
  // Представьте, что здесь еще 1000 записей
];

// Компонент для отображения одной новости
const NewsItem = ({ title, description }: { title: string; description: string }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
    <Text>{description}</Text>
  </View>
);

const NewsList = () => {
  return (
    <FlatList
      data={newsData} // Передаём массив данных
      renderItem={({ item }) => <NewsItem title={item.title} description={item.description} />} // Рендерим каждый элемент
      keyExtractor={(item) => item.id} // Уникальный ключ для каждого элемента
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default NewsList;

Обратите внимание на keyExtractor: каждый элемент должен иметь уникальный ключ. Если ключи будут одинаковыми, React будет путаться и оптимизация не сработает.

Ленивая подгрузка данных

FlatList поддерживает ленту с бесконечным скроллингом. Это достигается с помощью пропса onEndReached:

<FlatList
  data={newsData}
  renderItem={({ item }) => <NewsItem title={item.title} description={item.description} />}
  keyExtractor={(item) => item.id}
  onEndReached={() => {
    console.log('Загружаем больше данных...');
    // Здесь вы можете подгрузить дополнительные данные
  }}
  onEndReachedThreshold={0.5} // Процент экрана до конца списка, при котором срабатывает событие
/>

VirtualizedList: более гибкий, но сложный инструмент

VirtualizedList — это более низкоуровневый инструмент, на котором построен FlatList. Если FlatList справляется с вашей задачей, используйте его. Однако, если у вас сложные или динамические списки, VirtualizedList может предложить больше гибкости.

Пример использования VirtualizedList

Вместо data VirtualizedList работает с функцией getItem, которая возвращает элемент по индексу.

import React from 'react';
import { VirtualizedList, Text, View, StyleSheet } from 'react-native';

// Генератор данных (имитация большого массива)
const generateData = (numItems: number) => {
  return Array.from({ length: numItems }, (_, index) => ({
    id: String(index + 1),
    title: `Элемент ${index + 1}`,
  }));
};

const data = generateData(1000); // 1000 элементов

const getItem = (data: any[], index: number) => data[index];
const getItemCount = (data: any[]) => data.length;

const VirtualizedListExample = () => (
  <VirtualizedList
    data={data}
    initialNumToRender={10} // Количество элементов, которые будут отрендерены сразу
    renderItem={({ item }) => (
      <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
    )}
    getItem={getItem} // Получение элемента по индексу
    getItemCount={getItemCount} // Общее количество элементов
    keyExtractor={(item) => item.id} // Уникальный ключ
  />
);

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default VirtualizedListExample;

VirtualizedList полезен, если у вас динамические массивы или данные, которые подгружаются постранично.

Сравнение FlatList и VirtualizedList

Когда и какой компонент использовать?

Используйте FlatList для подавляющего большинства задач. Если у вас есть уникальные требования, такие как асинхронное получение элементов по индексу, переходите на VirtualizedList.

Типичные ошибки и особенности

Очень важно корректно использовать keyExtractor. Если ключи будут неуникальными, React может начать странно себя вести: элементы будут перерендериваться или заменять друг друга, а производительность упадёт.

Ещё одна частая ошибка — рендеринг слишком большого количества элементов одновременно. Никогда не пытайтесь показать сразу 1000 элементов — пусть пользователи наслаждаются плавным скроллом, а вы анализируйте, какие данные им действительно нужны.

На этом наши эксперименты с длинными списками на сегодня закончены! Теперь вы вооружены знаниями о FlatList и VirtualizedList и сможете эффективно работать с любым количеством данных.

2

Задача

Модуль 3: React, 25 уровень, 6 лекция

Недоступна

Создание простого списка с FlatList

Создание простого списка с FlatList

Открыть