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

Прежде чем оптимизировать, нужно найти узкие места. React Native предоставляет инструменты для профилирования.

▸React Dev Tools Profiler

Запустите приложение в development mode

Откройте React Dev Tools → вкладка Profiler

Запишите взаимодействие с пользователем

Анализируйте rerenders и время рендеринга

▸Systrace (Android)

bash

1npx react-native run-android --variant=release
2# Затем используйте Android Studio Profiler

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

▸FlatList вместо ScrollView

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

javascript

1// ❌ Плохо
2import { ScrollView } from 'react-native';
3<ScrollView>
4  {items.map(item => <Item key={item.id} {...item} />)}
5</ScrollView>
6
7// ✅ Хорошо
8import { FlatList } from 'react-native';
9<FlatList
10  data={items}
11  keyExtractor={(item) => item.id}
12  renderItem={({ item }) => <Item {...item} />}
13  initialNumToRender={10}
14  maxToRenderPerBatch={10}
15  windowSize={5}
16/>

▸Оптимальные пропсы FlatList

initialNumToRender — количество элементов при первом рендере

maxToRenderPerBatch — максимум элементов за один батч

windowSize — количество экранов для виртуализации

getItemLayout — фиксированная высота элементов

javascript

1getItemLayout={(data, index) => ({
2  length: ITEM_HEIGHT,
3  offset: ITEM_HEIGHT * index,
4  index,
5})}

Мемоизация компонентов

▸React.memo

Оборачивает компонент и пропускает рендер если пропсы не изменились.

javascript

1const UserCard = React.memo(({ name, avatar }) => (
2  <View style={styles.card}>
3    <Image source={{ uri: avatar }} style={styles.avatar} />
4    <Text>{name}</Text>
5  </View>
6));

▸useMemo для вычислений

javascript

1function FilteredList({ items, filterText }) {
2  const filteredItems = useMemo(() => {
3    return items.filter(item =>
4      item.name.toLowerCase().includes(filterText.toLowerCase())
5    );
6  }, [items, filterText]);
7
8  return (
9    <FlatList
10      data={filteredItems}
11      renderItem={({ item }) => <Item {...item} />}
12    />
13  );
14}

▸useCallback для функций

javascript

1const handlePress = useCallback((id) => {
2  navigation.navigate('Details', { id });
3}, [navigation]);

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

▸Избегайте анонимных функций в JSX

javascript

1// ❌ Плохо — создаёт новую функцию каждый рендер
2<FlatList
3  renderItem={({ item }) => <Item onPress={() => handlePress(item.id)} />}
4/>
5
6// ✅ Хорошо
7const renderItem = useCallback(({ item }) => (
8  <Item onPress={() => handlePress(item.id)} />
9), [handlePress]);
10
11<FlatList renderItem={renderItem} />

▸Изображения

javascript

1import FastImage from 'react-native-fast-image';
2
3// Используйте FastImage вместо Image
4<FastImage
5  source={{ uri: imageUrl, priority: FastImage.priority.normal }}
6  style={{ width: 200, height: 200 }}
7  resizeMode={FastImage.resizeMode.cover}
8/>

Устранение утечек памяти

▸Очистка подписок

javascript

1useEffect(() => {
2  const subscription = DeviceEventEmitter.addListener(
3    'event', handler
4  );
5
6  return () => {
7    subscription.remove(); // Обязательно отписывайтесь
8  };
9}, []);

▸Очистка таймеров

javascript

1useEffect(() => {
2  const timer = setInterval(() => {
3    // ...
4  }, 1000);
5
6  return () => clearInterval(timer);
7}, []);

Заключение

Производительность React Native определяется правильным использованием FlatList, мемоизацией компонентов и профилированием. Регулярное профилирование помогает выявить узкие места до того, как они станут проблемой для пользователей.

#react-native#производительность#flatlist#useMemo#оптимизация#профилирование

React Native≈ 12 мин чтения5 мая 2024 г.

Оптимизация производительности React Native: FlatList и useMemo

Практические техники оптимизации React Native: виртуализация списков, мемоизация компонентов, профилирование и устранение утечек памяти.

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

Прежде чем оптимизировать, нужно найти узкие места. React Native предоставляет инструменты для профилирования.

▸React Dev Tools Profiler

Запустите приложение в development mode

Откройте React Dev Tools → вкладка Profiler

Запишите взаимодействие с пользователем

Анализируйте rerenders и время рендеринга

▸Systrace (Android)

bash

1npx react-native run-android --variant=release
2# Затем используйте Android Studio Profiler

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

▸FlatList вместо ScrollView

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

javascript

1// ❌ Плохо
2import { ScrollView } from 'react-native';
3<ScrollView>
4  {items.map(item => <Item key={item.id} {...item} />)}
5</ScrollView>
6
7// ✅ Хорошо
8import { FlatList } from 'react-native';
9<FlatList
10  data={items}
11  keyExtractor={(item) => item.id}
12  renderItem={({ item }) => <Item {...item} />}
13  initialNumToRender={10}
14  maxToRenderPerBatch={10}
15  windowSize={5}
16/>

▸Оптимальные пропсы FlatList

initialNumToRender — количество элементов при первом рендере

maxToRenderPerBatch — максимум элементов за один батч

windowSize — количество экранов для виртуализации

getItemLayout — фиксированная высота элементов

javascript

1getItemLayout={(data, index) => ({
2  length: ITEM_HEIGHT,
3  offset: ITEM_HEIGHT * index,
4  index,
5})}

Мемоизация компонентов

▸React.memo

Оборачивает компонент и пропускает рендер если пропсы не изменились.

javascript

1const UserCard = React.memo(({ name, avatar }) => (
2  <View style={styles.card}>
3    <Image source={{ uri: avatar }} style={styles.avatar} />
4    <Text>{name}</Text>
5  </View>
6));

▸useMemo для вычислений

javascript

1function FilteredList({ items, filterText }) {
2  const filteredItems = useMemo(() => {
3    return items.filter(item =>
4      item.name.toLowerCase().includes(filterText.toLowerCase())
5    );
6  }, [items, filterText]);
7
8  return (
9    <FlatList
10      data={filteredItems}
11      renderItem={({ item }) => <Item {...item} />}
12    />
13  );
14}

▸useCallback для функций

javascript

1const handlePress = useCallback((id) => {
2  navigation.navigate('Details', { id });
3}, [navigation]);

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

▸Избегайте анонимных функций в JSX

javascript

1// ❌ Плохо — создаёт новую функцию каждый рендер
2<FlatList
3  renderItem={({ item }) => <Item onPress={() => handlePress(item.id)} />}
4/>
5
6// ✅ Хорошо
7const renderItem = useCallback(({ item }) => (
8  <Item onPress={() => handlePress(item.id)} />
9), [handlePress]);
10
11<FlatList renderItem={renderItem} />

▸Изображения

javascript

1import FastImage from 'react-native-fast-image';
2
3// Используйте FastImage вместо Image
4<FastImage
5  source={{ uri: imageUrl, priority: FastImage.priority.normal }}
6  style={{ width: 200, height: 200 }}
7  resizeMode={FastImage.resizeMode.cover}
8/>

Устранение утечек памяти

▸Очистка подписок

javascript

1useEffect(() => {
2  const subscription = DeviceEventEmitter.addListener(
3    'event', handler
4  );
5
6  return () => {
7    subscription.remove(); // Обязательно отписывайтесь
8  };
9}, []);

▸Очистка таймеров

javascript

1useEffect(() => {
2  const timer = setInterval(() => {
3    // ...
4  }, 1000);
5
6  return () => clearInterval(timer);
7}, []);

Заключение

#react-native#производительность#flatlist#useMemo#оптимизация#профилирование

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

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

▸React Dev Tools Profiler

▸Systrace (Android)

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

▸FlatList вместо ScrollView

▸Оптимальные пропсы FlatList

Мемоизация компонентов

▸React.memo

▸useMemo для вычислений

▸useCallback для функций

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

▸Избегайте анонимных функций в JSX

▸Изображения

Устранение утечек памяти

▸Очистка подписок

▸Очистка таймеров

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

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

▸React Dev Tools Profiler

▸Systrace (Android)

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

▸FlatList вместо ScrollView

▸Оптимальные пропсы FlatList

Мемоизация компонентов

▸React.memo

▸useMemo для вычислений

▸useCallback для функций

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

▸Избегайте анонимных функций в JSX

▸Изображения

Устранение утечек памяти

▸Очистка подписок

▸Очистка таймеров

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня