СРАВНИТЕЛЬНЫЙ АНАЛИЗ ВРЕМЕНИ РЕНДЕРИНГА КОМПОНЕНТОВ ПРИ ИСПОЛЬЗОВАНИИ РАЗЛИЧНЫХ ИНСТРУМЕНТОВ УПРАВЛЕНИЯ СОСТОЯНИЯМИ В REACT-ПРИЛОЖЕНИЯХ

Аннотация

Цели. В настоящее время веб-технологии достигли такого уровня своего развития, при котором пользователю важно, чтобы система решала определённую задачу и была наиболее эффективной среди аналогов. Одним из вариантов повышения эффективности является оптимизация времени рендеринга компонентов, которые составляют веб-приложение. Большинство таких приложений решают сразу несколько задач, следовательно их структуру можно представить, как композицию нескольких подсистем. Нередко состояние подсистемы оказывает влияние на состояние всей системы в целом. Для доступа в подсистемах к этому состоянию разработчики применяют различные инструменты управления состоянием. Цель работы – сравнить время рендеринга компонентов в React-приложениях, различающихся функциональными возможностями, используя различные актуальные инструменты управления состоянием.

Методы. Предлагается исследовать работу веб-приложений, построенных с помощью фреймворка React, при использовании таких инструментов управления состоянием приложения, как Redux Toolkit, Effector и React Context. Экспериментальные результаты получены путём использования инструментов разработчика, предоставляемых Google, в частности вкладки Performance.

Результаты. Представлено описание спроектированных веб-приложений, используемых в процессе исследования, приведены экспериментальные результаты и их сравнение.

Выводы. Проведенные исследования позволяют говорить о том, что Effector показывает лучший результат в приложениях, в которых необходимо выполнять асинхронные запросы на сервер (среднее значение времени рендеринга компонентов равно 6585,05 мс), Redux Toolkit является наиболее оптимальным решением в случаях, когда веб-приложение состоит из большого и малого количества компонентов без выполнения асинхронных запросов (среднее значение времени рендеринга компонентов равно 114,97 мс и 1,03 мс соответственно).