CC BY
9
РАЗРАБОТКА ВЫСОКОПРОИЗВОДИТЕЛЬНЫХ REACT-ПРИЛОЖЕНИЙ: МЕТОДЫ И ПРАКТИКИ ОПТИМИЗАЦИИ Кравцов Е.П. (Российская Федерация)
Кравцов Евгений Павлович- старший разработчик программного обеспечения,
Sberdevices, г. Москва
Аннотация: в этой статье рассматриваются передовые методы и стратегии оптимизации приложений React с целью повышения их производительности, масштабируемости и удобства работы с пользователем. React, популярная библиотека JavaScript для создания пользовательских интерфейсов, известна своей эффективностью и гибкостью. Однако по мере усложнения приложений разработчики могут столкнуться с проблемами поддержания высокой производительности и плавного взаимодействия с пользователем. В этой статье рассматриваются эти проблемы, предоставляя подробное руководство по методам оптимизации, адаптированным для приложений React. Ключевые слова: React, оптимизация производительности, разделение кода, мемоизация, управление состоянием, оптимизация активов, рендеринг на стороне сервера, генерация статических сайтов, мониторинг производительности, веб-разработка.
DEVELOPING HIGH-PERFORMANCE REACT APPLICATIONS: METHODS AND PRACTICES FOR OPTIMIZATION Kravtsov E.P. (Russian Federation)
Kravtsov Evgenii Pavlovitch - Senior Frontend Developer, SBERDEVICES, MOSCOW
Abstract: this article explores advanced techniques and strategies for optimizing React applications, aiming to enhance their performance, scalability, and user experience. React, a popular JavaScript library for building user interfaces, is known for its efficiency and flexibility. However, as applications grow in complexity, developers may encounter challenges in maintaining high performance and smooth user interactions. This article addresses these challenges by providing a comprehensive guide to optimization practices tailored for React applications.
Keywords: React, performance optimization, code splitting, memoization, state management, asset optimization, server-side rendering, static site generation, performance monitoring, web development.
В постоянно меняющемся мире веб-разработки первостепенное значение имеет создание приложений, которые не только функциональны, но и высокопроизводительны. React, разработанная Facebook, стала одной из ведущих библиотек для создания пользовательских интерфейсов, предлагая разработчикам возможность создавать динамические и адаптивные веб-приложения.React — библиотека, которая может рендерить компоненты сайта как на серверной, так и на клиентской стороне [1]. Однако по мере роста сложности этих приложений возрастает и проблема обеспечения их бесперебойной и эффективной работы. Потребность в скорости и эффективности — это не просто вопрос удовлетворенности пользователей; это напрямую влияет на вовлеченность пользователей, коэффициенты конверсии и общий успех приложения. Эта реальность делает оптимизацию производительности неотъемлемой частью процесса разработки.
Ниже рассмотрена варианты оптимизации React приложений.
Разделение кода (Code splitting)
Разделение кода — это процесс разбиения большого пакета JavaScript на более мелкие фрагменты, которые можно загружать по требованию. Традиционно веб-приложения объединяют весь свой код JavaScript в один файл. Хотя этот подход упрощает развертывание, он может привести к увеличению времени загрузки, поскольку пользователям приходится загружать большие объемы данных, прежде чем приложение станет пригодным для использования, особенно при медленном подключении к Интернету.
React, будучи библиотекой для создания пользовательских интерфейсов, по своей сути не включает разделение кода, но поддерживает его посредством динамических операторов import () и библиотек, таких как React Router или Loadable Components[2]. Стратегически реализуя разделение кода, разработчики могут гарантировать, что пользователи изначально загружают только необходимый код, необходимый для отображения текущего представления, тем самым уменьшая объем кода, который необходимо проанализировать и выполнить при загрузке страницы.
Динамический импорт — это функция JavaScript, которая позволяет разработчикам импортировать модули по требованию с помощью функции import (). В приложениях React эту функцию можно использовать для разделения кода на уровне компонентов.
Пример использования динамического импорта:
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() { return ( <div>
<Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> </div> );
}
В этом примере LazyComponent не загружается до тех пор, пока он не потребуется приложению, поэтому он не включается в исходный пакет. Компонент Suspense из React используется для упаковки лениво загружаемых компонентов, обеспечивая резервный пользовательский интерфейс для отображения во время загрузки компонента.
Разделение кода на основе маршрутов страниц
Для приложений, использующих React Router, разделение кода может применяться к отдельным маршрутам, гарантируя, что код, необходимый для рендеринга страницы, загружается только тогда, когда пользователь переходит на эту страницу.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const HomePage = lazy(() => import('./routes/HomePage'));
const AboutPage = lazy(() => import('./routes/AboutPage'));
function App() { return ( <Router>
<Suspense fallback={<div>Loading...</div>}> <Switch>
<Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> </Switch> </Suspense> </Router> );
}
В приведенном выше коде компоненты HomePage и AboutPage загружаются динамически в зависимости от маршрута. Этот метод значительно сокращает время начальной загрузки, поскольку загружается только код, необходимый для начального маршрута.
React.memo
В сфере разработки React функциональные компоненты занимают лидирующие позиции, в сравнении с классовыми компонентами. Чтобы оптимизировать эти функциональные компоненты, особенно в сценариях, связанных с частыми повторными рендерингами, React предоставляет компонент более высокого порядка с именем React.memo. Этот инструмент предназначен для запоминания вашего компонента, тем самым пропуская рендеринг, когда переданные ему реквизиты одинаковы на основе поверхностного сравнения. В этом разделе подробно рассматривается использование React.memo для оптимизации функциональных компонентов, иллюстрируются его преимущества и нюансы реализации.
React.memo — это компонент более высокого порядка, который окружает функциональный компонент. Эта упаковка сообщает React запомнить компонент, то есть он запоминает последний результат рендеринга и использует его, если текущие реквизиты такие же, как и при последнем рендеринге компонента. Этот процесс значительно сокращает количество необходимых повторных рендерингов, повышая производительность вашего приложения.
Вот простой пример использования React.memo в функциональном компоненте:
import React, { memo } from 'react';
const MyComponent = memo(({ message }) => { console.log('Component rendered!');
return <div>{message}</div>;
});
В этом примере MyComponent будет повторно отображаться только при изменении свойства сообщения. Если родительский компонент выполняет повторную визуализацию, но свойство сообщения остается неизменным, MyComponent пропустит этап рендеринга, тем самым оптимизируя производительность.
Хотя поведение React.memo по умолчанию использует поверхностное сравнение свойств, могут быть случаи, когда необходима собственная логика сравнения. Например, если ваш компонент принимает объект в качестве реквизита, и вы хотите сравнить глубокие свойства внутри этого объекта, вы можете предоставить специальную функцию сравнения в качестве второго аргумента React.memo.
const MyComponent = memo( ({ user }) => {
console.log('Component rendered!'); return <div>Hello, {user.name}!</div>; },
(prevProps, nextProps) => { return prevProps.user.id === nextProps.user.id;
}
);
Эта пользовательская функция сравнения гарантирует, что MyComponent выполняет повторную визуализацию только при изменении user.id, игнорируя изменения в других свойствах пользователя, которые не влияют на выходные данные компонента.
Хотя React.memo может значительно повысить производительность, это не всегда необходимо для каждого компонента. Вот несколько рекомендаций о том, когда использовать React.memo:
-Частые повторные рендеринги. Если компонент часто перерисовывается из-за изменений в его родительском элементе, но его свойства не изменяются, обертывание его в React.memo может предотвратить эти ненужные повторные рендеринги.
-Сложные компоненты. Для компонентов, рендеринг которых требует больших затрат из-за сложных вычислений, тяжелых манипуляций с DOM или вложенных дочерних компонентов, React.memo может предложить повышение производительности.
-Списки элементов: при рендеринге списков элементов, где отдельные элементы обновляются независимо, запоминание каждого компонента элемента может предотвратить повторную визуализацию всего списка, когда изменяется только один элемент.
Виртуализация компонентов React
Виртуализация в контексте приложений React — это мощный метод, направленный на повышение производительности, особенно в сценариях, связанных с рендерингом больших списков или сложных наборов данных[3]. Этот подход предполагает отображение только подмножества элементов в DOM в любой момент времени на основе текущего окна просмотра пользователя, тем самым значительно уменьшая количество узлов DOM, создаваемых и управляемых в любой момент времени. В этой статье рассматривается концепция виртуализации, ее преимущества и способы ее реализации в приложениях React для достижения оптимальной производительности.
В типичном приложении React без виртуализации отрисовка большого списка или таблицы с тысячами элементов может привести к значительным проблемам с производительностью из-за высокой стоимости манипуляций с DOM и циклов обновления[4]. Виртуализация решает эту проблему, отображая только те элементы, которые умещаются в текущем окне просмотра или небольшом окне вокруг него, тем самым снижая рабочую нагрузку на браузер и улучшая взаимодействие с пользователем.
Преимущества виртуализации
Улучшенная производительность. Минимизируя количество элементов, отображаемых в любой момент времени, виртуализация сокращает начальное время загрузки, ускоряет взаимодействие и минимизирует использование памяти.
Улучшенный пользовательский интерфейс: более быстрый рендеринг и уменьшение задержки обеспечивают более плавную прокрутку и более быстрое реагирование приложений.
Масштабируемость: виртуализация позволяет отображать большие наборы данных без ущерба для производительности, что позволяет разрабатывать более сложные и ресурсоемкие приложения.
Реализация виртуализации в React
Чтобы реализовать виртуализацию в приложениях React, разработчики могут использовать такие библиотеки, как React-Window или React-Virtualized. Эти библиотеки предоставляют компоненты, оптимизированные для эффективного отображения больших списков, сеток и табличных данных.
Использование библиотеки React-Window
React-Window — более легкая и простая библиотека для виртуализации длинных списков и табличных данных. Вот базовый пример того, как использовать окно реагирования для отображения большого списка:
import React from 'react';
import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
<List height={150} itemCount={items.length} itemSize={35}
width={300}
>
{({ index, style }) => ( <div style={style}> {items[index]}
</div>
)}
</List>
);
В этом примере FixSizeList — это компонент из окна реагирования, который отображает список, в котором каждый элемент имеет фиксированный размер. Свойство itemCount определяет общее количество элементов в списке, а свойство itemSize определяет высоту каждого элемента. Компонент отображает только те элементы, которые помещаются в текущий экран просмотра, как определено реквизитами высоты и ширины.
Использование библиотеки React-virtualized
React-virtualized предлагает более полный набор функций для виртуализации, включая автоматический размер, динамическую высоту строк и макеты сетки[5]. Он немного сложнее, чем React-Window, но предлагает большую гибкость для удовлетворения различных потребностей виртуализации.
import React from 'react';
import { List } from 'react-virtualized';
const MyList = ({ items }) => (
<List width={300} height={150} rowCount={items.length} rowHeight={30}
rowRenderer={({ key, index, style }) => ( <div key={key} style={style}> {items[index]}
</div>
)}
/>
);
В этом примере, виртуализированном с помощью реакции, компоненту List требуется функция rowRenderer, которая описывает, как визуализировать каждую строку. Подобно реагирующему окну, для управления размером списка и его элементов требуются свойства width, height, rowCount и rowHeight.
Виртуализация — важный метод оптимизации приложений React, особенно тех, которые отображают большие наборы данных. Отрисовывая только те элементы, которые в данный момент видны, виртуализация может значительно повысить производительность и скорость реагирования вашего приложения. Такие библиотеки, как React-Window и Reaction-Virtualized, упрощают реализацию виртуализации, предоставляя настраиваемые и эффективные решения для рендеринга больших списков и сеток. Как и в случае с любым методом оптимизации, важно оценить конкретные потребности вашего
приложения и выбрать инструмент, который лучше всего соответствует его требованиям, обеспечивая баланс между увеличением производительности и затратами на разработку.
Список литературы /References
1. React и SEO: преимущества изоморфности React для одностраничных приложений // XBSoftware -[Электронный ресурс]:
URL:https://xbsoítware.ru/blog/react-seo-izomorphnost-react-odnostrannoe-prilozhenie/ (дата обращения: 01.03.2024)
2. Стефанов С.Г., React.js. Быстрый старт: Книга. - М.: O'Reilly - Питер, 2017. - 301 с.
3. React.js: собираем с нуля изоморфное / универсальное приложение. // habr - [Электронный ресурс]: URL: https://habr.com/ru/post/309958/.
4. Бэнкс А.В., Порселло Е.А., React и Redux. Функциональная веб-разработка: Книга. - М.: O'Reilly -Питер, 2018. - 303 с.
5. React-virtualized vs. react-window // https://blog.logrocket.com/ - [Электронный ресурс]: https://blog.logrocket.com/react-virtualized-vs-react-window/ (дата обращения: 02.03.2024)
