Повторний рендеринг в React

Як фронтенд розробник, ви, ймовірно, стикалися з терміном "повторний рендеринг", якщо працювали з React. Сьогодні ми детально розберемося з цим терміном. Перш за все, нам потрібно знати, що таке "рендеринг" в екосистемі React.

Що таке "рендеринг" в React?

В екосистемі React рендеринг відноситься до процесу, за допомогою якого React відображає елементи інтерфейсу користувача (UI) на екрані відповідно до стану програми. Як ви вже змогли зрозуміти, "повторний рендеринг" відноситься до процесу повторного відображення.

Добре, тепер, коли ми розуміємо концепцію, давайте обговоримо, коли ми стикаємося з цим процесом у нашій програмі React.

У React фактично існує лише один метод повторного рендеру компонентів: ОНОВЛЕННЯ СТАНУ!!!

Напевно, ви чули, що зміна пропів компонента здатна повторно рендерити компонент. Пізніше я розповім про те, чому цей аргумент неправильний.

Оновлення стану

Як я вже згадував вище, єдиний спосіб повторно рендерити компонент – це оновлення стану. Тому що React стежить за змінами даних таким чином. Дозвольте мені навести приклад:

Якщо ви напишете цей код і натиснете на кнопку, побачите, що нічого не змінилося. Давайте зробимо те ж саме, використовуючи хук React’a useState:

В даному випадку ви побачите, що число збільшується на одиницю.

Можливо, вам цікаво, чому кількість збільшується під час використання хука useState. React використовує концепцію, відому як "Віртуальний DOM" (Virtual DOM), яка є аналогом фактичного DOMу (Document Object Model — об’єктної моделі документа). Віртуальний DOM — це техніка, яка підвищує ефективність шляхом мінімізації прямої взаємодії з DOM. Замість того, щоб вносити зміни безпосередньо в DOM, зміни спочатку вносяться у віртуальний DOM. Потім React порівнює нову версію віртуального DOM з попередньою та оновлює лише фактичні елементи DOM, які змінилися. Ми називаємо цей крок "повторним рендерингом". Такий підхід значно підвищує продуктивність складних динамічних веб-додатків. React виконує ці кроки завдяки хуку useState.

Зміна пропів

Коли я почав вивчати React, я припускав, що зміна пропів компонентів призведе до повторного рендерингу цих компонентів. Однак, провівши кілька тестів, я виявив, що це припущення невірне.

Дозвольте мені чітко пояснити це:

У цьому експерименті ми працюємо з двома прикладами. Перший приклад містить компонент із пропом, тоді як другий приклад містить додатковий компонент, який не має пропів.

У першому прикладі ми маємо 2 компоненти. NameViewer і його батьківський компонент App. Якщо ви спробуєте щось ввести, ви помітите, що ці логи з’являються в консолі. (Не звертайте уваги на додаткові логи, які відображаються кольорами, відмінними від білого. Вони з’являються через строгий режим React (strict mode)).

У наведеному прикладі ви можете подумати, що компонент NameViewer повторно рендериться, оскільки його проп змінюється. Переглянувши другий приклад, ви зрозумієте, що пропи не є визначальним фактором для повторного рендеру компонента.

У другому прикладі я додав інший компонент під назвою ComponentWithNoProps. Цей компонент не має пропів. Однак, якщо ви спробуєте щось ввести, ви також побачите лог "ComponentWithNoProps render" у консолі. (Будь ласка, не звертайте уваги на додаткові логи, які відображаються кольорами, відмінними від білого. Вони з’являються через суворий режим React(strict mode)).

Як зазначалося, "ComponentWithNoProps" не має жодних пропів, але все ще повторно рендериться. Вам цікаво, чому це відбувається?

У React зміна стану компонента потенційно може призвести до повторного рендерингу цього компонента та його дочірніх компонентів.

Отже, які висновки ми можемо зробити із наведеного вище речення?

• 1. React починає повторно рендерити компонент, у якому був ініціалізований стан.
• 2. Дочірні компоненти можуть повторно рендериться, якщо не використовуються техніки мемоізації.
• 3. Самі по собі пропи не призводять до повторного рендерингу компонентів, але зміни в пропах можуть ініціювати повторний рендеринг.

Існують техніки, які називаються "мемоізація" (memoization), не плутати з "запам’ятовуванням" (memorization), вони можуть запобігти непотрібному повторному рендерингу. Незважаючи на різницю в термінології, концепції мають спільні риси.

Я збираюся поділитися порадою щодо запобігання непотрібного повторного рендерингу.

Бонусна порада щодо мемоізації

За допомогою "React.memo" ми можемо запобігти непотрібним повторним рендерингам. Огортаючи компонент за допомогою "memo", ми, по суті, наказуємо React: "Гей, не рендеруй повторно цей компонент, якщо його пропи не змінилися".

Після цього ви побачите ці логи у консолі. Як видно, в логах немає жодного повідомлення про компонент "ComponentWithNoProps". Це тому, що React зберігає його в пам'яті і рендерить компонент лише в разі зміни його пропів. У цьому випадку, компонент не має пропів, тому він не рендериться знову.

Дякую за час, який ви виділили на прочитання цієї статті.

Джерело: http://surl.li/hjopy
Переклад: Yevheniia Melnychenko
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень