React Native — это мощный инструмент для создания мобильных приложений, но, как и любой фреймворк, он может страдать от проблем с производительностью. Особенно если у вас большое количество данных, сложная анимация или ресурсоёмкие вычисления. Но не волнуйтесь, всё можно улучшить!

Сегодня мы разберём:

• Основы оптимизации в React Native.
• Использование React.memo и профилирования.
• На практике оптимизируем список из 1000 элементов с помощью FlatList.

Почему важна производительность?

Медленное приложение раздражает пользователей. Никто не хочет ждать, пока интерфейс отреагирует на их действия, или видеть лаги при прокрутке. Хорошая производительность:

• Увеличивает удовлетворённость пользователей.
• Снижает вероятность удаления приложения.
• Делает разработку более предсказуемой.

Основы оптимизации производительности

Оптимизация рендеринга

В React Native каждый раз, когда изменяется состояние или пропсы, компонент рендерится заново. Это нормально, но иногда ререндеринг может происходить там, где это не нужно.

Как решить:

• Используйте React.memo, чтобы избежать ненужных ререндеров.
• Оптимизируйте функции обратного вызова с помощью useCallback.
• Профилируйте приложение, чтобы найти проблемные места.

Виртуализация списков

Если вы рендерите большой список (например, 1000 элементов), то отображение всех элементов сразу может замедлить приложение или вызвать сбой. FlatList в React Native использует виртуализацию: рендерит только те элементы, которые видны на экране.

Советы:

• Используйте FlatList или SectionList вместо ScrollView.
• Настраивайте initialNumToRender для контроля первых отрисованных элементов.
• Используйте уникальные ключи для элементов списка (keyExtractor).

Работа с большими объектами

Изменение больших объектов (например, массивов) может вызывать перерендеры всех связанных компонентов.

Решение:

• Избегайте мутаций объектов (всегда создавайте новые объекты при изменении).
• Используйте shouldComponentUpdate (в классовых компонентах) или React.memo.

Профилирование производительности

React Native предоставляет инструменты для профилирования. Вы можете:

• Использовать React DevTools для анализа дерева компонентов.
• Проверять, сколько времени занимает рендеринг.
• Использовать Flipper для анализа производительности.

Практика: оптимизация списка из 1000 элементов

Давайте реализуем приложение, которое отображает список из 1000 элементов. Мы добавим оптимизацию с использованием FlatList и React.memo.

Шаг 1: Создание базового списка

Создадим приложение, которое рендерит список из 1000 элементов.

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

const App = () => {
  const data = Array.from({ length: 1000 }, (_, index) => `Элемент ${index + 1}`);

  return (
    <ScrollView style={styles.container}>
      {data.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  item: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
});

export default App;

Проблемы:

• При прокрутке могут возникнуть лаги.
• Рендерятся все 1000 элементов сразу, что увеличивает нагрузку на память.

Шаг 2: Оптимизация с FlatList

Заменим ScrollView на FlatList, чтобы рендерить только видимые элементы.

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

const App = () => {
  const data = Array.from({ length: 1000 }, (_, index) => `Элемент ${index + 1}`);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()} // Уникальные ключи
      contentContainerStyle={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  item: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
});

export default App;

Что изменилось:

• FlatList автоматически виртуализирует список.
• Только видимые элементы рендерятся в памяти, что улучшает производительность.

Шаг 3: Использование React.memo

Добавим React.memo, чтобы предотвратить ненужные ререндеры элементов.

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

const ListItem = memo(({ item }) => {
  console.log(`Рендеринг: ${item}`); // Проверяем, какие элементы рендерятся
  return (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );
});

const App = () => {
  const data = Array.from({ length: 1000 }, (_, index) => `Элемент ${index + 1}`);

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <ListItem item={item} />}
      keyExtractor={(item, index) => index.toString()}
      contentContainerStyle={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  item: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
});

export default App;

Что добавилось:

• Компонент ListItem обёрнут в React.memo.
• Теперь элементы рендерятся только при изменении item.

Советы для оптимизации

• Используйте уникальные ключи в списках: Это ускоряет рендеринг.
• Избегайте анонимных функций: Используйте useCallback для мемоизации.
• Виртуализируйте списки: FlatList и SectionList — ваши друзья.
• Профилируйте приложение: Найдите узкие места с помощью инструментов профилирования (React DevTools, Flipper).