МЕТОД ПІДВИЩЕННЯ ПРОДУКТИВНОСТІ ВЕБДОДАТКУ В ЕКОСИСТЕМІ ФРЕЙМВОРКУ REACT

Анотація

У статті розглянуто наявні методи підвищення продуктивності вебдодатку в екосистемі фреймворку React, їх переваги та недоліки, зокрема, використання React.memo, PureComponent, shouldComponentUpdate, Lazy Loading, Code Splitting та мемоізації селекторів. Запропоновано оптимізований метод, який дозволяє скоротити час виконання програми в середньому на 17%. Основна ідея запропонованого методу полягає в розділенні стану даних вебдодатку на атомарні фрагменти. Кожна сутність має свій власний фрагмент стану, що ізолює його від інших. Ці фрагменти використовуються React Context API для передачі конфігурації сутності, включаючи дані та функції для її зміни. Context API використовується для забезпечення обробки усієї програми. Стан розділяється на атомарні фрагменти, що дозволяє реалізувати їх ізоляцію. За допомогою функції hook отримується доступ до цих фрагментів та їх зміни. Компоненти, які використовують цей метод, автоматично реагують на зміни стану і оновлюються, якщо стан змінився. Головною перевагою такого підходу є можливість використання технології замикання та передавання функції обробників стану. Запропонований метод базується на підході, який було запозичено з бібліотеки Recoil. Цей підхід є схожим на стандартні функції-хуки у фреймворку React, для якого було розроблено запропонований метод. Було використано переваги та недоліки використання популярних бібліотек для керування станом у вебдодатках. Метою модифікації було уникнення надмірних операцій, коли поточний та новий стани не відрізняються, покращення продуктивності при додаванні великої кількості елементів та забезпечення можливості використання схожих частин коду багаторазово. Особливу увагу приділено проблемі надмірних операцій, які виникають, коли всі компоненти, що підписані на зміну стану, автоматично оновлюються, навіть якщо самі значення стану не змінились. Додано можливість перевірки рівності станів перед їх оновленням, що дозволяє заощадити ресурси та зберегти продуктивність. Також реалізовано спрощено роботу з функціями зміни стану, щоб їх можна було знову використовувати без повторення коду.