Как улучшить производительность приложения React Native

Советы и примеры по улучшению производительности приложения React Native.

Кэш изображений

В React Native у нас есть «Изображение» в качестве основного компонента. Мы можем использовать этот компонент для отображения изображения, но он страдает от нескольких проблем, таких как:

• Мерцание.
• Кэш промахивается.
• Низкопроизводительная загрузка из кеша.
• Низкая производительность в целом.

Все это может повредить пользовательскому опыту. В этих случаях мы можем получить помощь от «react-native-fast-image». Эта библиотека доступна для всех платформ и работает как по волшебству.

Примечание. Вы должны использовать React Native 0.60.0 или более позднюю версию, чтобы использовать самую последнюю версию react-native-fast-image.

Пример

Шаг 1: Установите библиотеку.

yarn add react-native-fast-image
cd ios && pod install

Шаг 2: Импортируйте и используйте библиотеку.

import FastImage from 'react-native-fast-image'
const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

Другие примеры можно найти здесь.

Запоминаемые значения

Использование useMemo может оптимизировать ваше приложение для реагирования, когда экран часто отображается.

useMemo запомнит значение переменной и перевычислит значение, только если одна из зависимостей изменится. В результате такая оптимизация помогает избежать дорогостоящих вычислений при каждом рендеринге. useMemo принимает 2 параметра:

• Запоминаемая функция вернет значение.
• Массив зависимостей.

Пример

const computeExpensiveValue = (a, b)=>{
  let total = 0;
  for(index=0; index<10000000; index++){
    total += index+a+b;
  }
  return total;
}
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Как мы видим в примере выше, мы будем вычислять индекс с переменными «a» и «b» 10000000 раз. Обратите внимание, что без помощи useMemo оптимизации мы будем вычислять одно и то же значение для каждого рендеринга, это может замедлить работу вашего приложения React Native. Использование useMemo гарантирует, что мы не будем вычислять одно и то же значение снова и снова для каждого рендеринга экрана и только в том случае, если одна из зависимостей, влияющих на окончательный результат, будет изменена.

Запоминаемые обратные вызовы

Как и useMemo, useCallback может оптимизировать ваше реагирующее нативное приложение, когда экран часто рендерится. useCallback вернет запомненную версию обратного вызова. useCallback принять 2 параметра:

• Функция для запоминания.
• Массив зависимостей.

Пример

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b]
);

Как видно из приведенного выше примера, мы передаем встроенную функцию doSomething, которая принимает 2 параметра: «a» и «b». Эти параметры подразумевают, что мы должны включить эти параметры как массив зависимостей. Используя in useCallback, мы гарантируем, что если «a» и «b» не будут изменены, мы не будем создавать одну и ту же функцию для каждого рендера.

useCallback вернет запомненную версию обратного вызова, которая изменится только в том случае, если изменилась одна из зависимостей.

Избегайте стрелочных функций

Стрелочные функции — частая проблема неэффективного повторного рендеринга. Избегайте использования стрелочных функций в качестве обратных вызовов в ваших функциях для рендеринга экранов.

Почему?

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

Избегайте этого случая — пример

class AvoidCase extends React.Component {
  // ...
  addTodo() {
    // ...
  }
  render() {
    return (
      <View>
        <TouchableHighlight onPress={() => this.addTodo()} />
      </View>
    );
  }
}

Правильный регистр — пример

class CorrectCase extends React.Component {
  // ...
  addTodo = () => {
    // ...
  }
  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.addTodo} />
      </View>
    );
  }

Спасибо за то, что вы дочитали до сих пор, если вам нравится такой контент, и вы хотите поддержать меня как программиста и писателя, чтобы я писал больше статей, подобных этой, пожалуйста, подпишитесь подписаться на Medium (подписка на 5 долларов США в месяц) по моей ссылке, и вы получите неограниченный доступ ко всему на Medium.

Продолжайте следить за другими примерами и советами по оптимизации React Native.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.