В этом посте мы рассмотрим пять советов по повышению производительности вашего приложения React.

1. Сократите ненужные рендеры

Ненужный повторный рендеринг может замедлить работу ваших приложений, заставив их чувствовать себя вялыми и невосприимчивыми.

Используя некоторые встроенные хуки React, мы можем свести к минимуму ненужные рендеры.

React.Memo

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

В этом случае мы можем использовать React.memo(), компонент более высокого порядка, для кэширования вывода дочернего компонента. Теперь дочерний компонент будет отображаться только при изменении его реквизита. Это может быть очень полезно для компонентов, которые имеют много свойств, которые не меняются часто.

const myComponent = React.memo((props) => {
    /* render using props */
});

export default myComponent;

Вы можете найти документацию React о том, как использовать памятку React здесь.

useCallback

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

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

2. Ленивая загрузка с разделением кода

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

Чтобы бороться с этим, мы можем разделить пакет и загрузить только то, что необходимо в данный момент. В React это можно сделать путем динамического импорта компонентов с помощью функции React.lazy.

До:

import OtherComponent from './OtherComponent';

После:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

Это автоматически загрузит пакет, содержащий OtherComponent, при первом отображении этого компонента.

Затем ленивый компонент должен быть отрендерен внутри Suspense компонента, что позволяет нам отображать некоторый запасной контент (например, индикатор загрузки), пока мы ждем загрузки ленивого компонента.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Вы можете найти полную документацию по разделению кода здесь.

3. Действия по устранению дребезга и регулированию событий

Устранение дребезга — это метод, используемый для повышения производительности часто выполняемых действий путем их задержки, группировки и выполнения только последнего вызова. Например, если у вас есть поле поиска, в котором результаты запрашиваются по мере того, как вы печатаете, выполнение вызовов API для каждого нажатия клавиши будет крайне неэффективным, поскольку нас интересует только конечный результат. В этом случае функция устранения дребезга была бы чрезвычайно полезна, по сути, вызывая API поиска только после заранее определенного тайм-аута.

Регулирование или ограничение скорости — это метод, используемый для повышения производительности часто выполняемых действий за счет ограничения скорости выполнения. Это похоже на устранение дребезга, за исключением того, что гарантирует регулярное выполнение действия. Это наиболее полезно для действий с часто повторяющимися событиями, таких как изменение размера и прокрутка, которые вызывают повторную визуализацию компонентов React. Поскольку нам не нужно поддерживать 100% синхронизацию этих действий, мы можем периодически вызывать обработчики этих событий.

Подробнее о компонентах троттлинга и дебаунса можно узнать здесь.

4. Виртуализируйте длинные списки

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

Виртуализация списка или работа с окнами — это концепция рендеринга только того, что видно пользователю. Количество элементов, отображаемых вначале, составляет небольшое подмножество всего списка, и окно видимого содержимого перемещается, когда пользователь продолжает прокручивать. Это улучшает производительность рендеринга и прокрутки списка.

Вы можете использовать библиотеку react-window, чтобы начать виртуализацию списков в вашем приложении.

5. Оптимизация ваших изображений

Хотя это может показаться очевидным, большие изображения могут значительно повлиять на производительность вашего приложения. У неоптимизированных больших изображений есть явные недостатки, от плохого времени загрузки до низкой производительности. Чтобы избежать этих потерь производительности, вы можете сжимать их, изменять их размер и предоставлять в соответствующем формате (например, в формате webp). Лучший способ сделать это — использовать сервис изображений CDN, который автоматизирует этап оптимизации изображений, которые он обслуживает.

Заключение

Низкая производительность приложения может снизить вовлеченность пользователей и негативно повлиять на SEO. Следуя этим советам, вы сможете повысить производительность за счет устранения дребезга, регулирования и виртуализации длинных списков, предотвратить ненужную повторную визуализацию с помощью React.memo и добавить общие улучшения в скорость вашего приложения за счет оптимизации изображений.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу