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

В этом руководстве мы рассмотрим некоторые из наиболее эффективных способов оптимизации производительности ваших приложений React. Мы рассмотрим основы мемоизации, отложенной загрузки и такие инструменты, как React Profiler, которые помогут вам выявить и устранить узкие места. Давайте начнем!

Введение: почему производительность важна в современных приложениях React

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

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

Мемоизация в React

Как эффективно использовать React.memo и useMemo

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

Реагировать.memo

Давайте начнем с React.memo. Этот компонент более высокого порядка предотвращает повторный рендеринг компонента, если его свойства не изменились.

Пример:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

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

использоватьMemo

Далее идет useMemo. Этот хук используется для запоминания дорогостоящих вычислений или значений внутри ваших функциональных компонентов.

Пример:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

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

Отложенная загрузка компонентов

Улучшение времени загрузки с помощью React.lazy

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

React предоставляет встроенную функцию React.lazy(), которая позволяет загружать компоненты по требованию.

Пример:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

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

React Profiler для мониторинга производительности

Как выявить узкие места

Трудно оптимизировать то, что нельзя измерить. Именно здесь на помощь приходит React Profiler. React Profiler позволяет отслеживать производительность ваших компонентов, выявлять медленный рендеринг и измерять «стоимость» повторного рендеринга.

Чтобы использовать React Profiler, просто оберните дерево компонентов и предоставьте функцию обратного вызова для сбора данных о производительности.

Пример:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

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

Другие стратегии оптимизации

Разделение кода, оптимизация обработки событий и многое другое

Помимо мемоизации и отложенной загрузки, существует несколько других методов повышения производительности вашего приложения React:

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

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

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

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

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

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

Заключение: создание высокопроизводительных приложений React с помощью этих методов

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

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

Готовы вывести производительность вашего приложения React на новый уровень? Попробуйте эти методы оптимизации в своих проектах и ​​наблюдайте, как скорость вашего приложения увеличивается!

Если вам понравилась эта статья, поддержите мою работу:

• Купи мне кофе
• Закажите звонок для получения наставничества или совета по карьере
• Следуйте за мной в Твиттере
• Подключитесь к LinkedIn