День 5 вивчення React: Батчинг та функціональні оновлення
Я думав, що багаторазовий виклик сеттера стану викликає кілька рендерів.
Я помилявся.
React розумніший за це. Він використовує процес, який називається Automatic Batching (автоматичний батчинг).
Замість того, щоб виконувати рендер після кожного окремого оновлення, React групує їх. Він збирає всі оновлення та виконує лише один рендер. Це підвищує продуктивність.
Ось що я дізнався сьогодні.
Процес батчингу Коли ви викликаєте кілька функцій стану, React дотримується такого алгоритму:
- Відбувається кілька оновлень стану.
- React групує їх разом.
- React виконує один рендер.
- React застосовує зміни до UI.
Проблема зі стандартними оновленнями Я спробував такий код: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Я очікував, що значення count зміниться з 0 на 3. Воно змінилося з 0 на 1.
Це стається тому, що setCount(count + 1) не означає «збільшити значення». Це означає «встановити значення count рівним цьому конкретному числу».
Якщо count дорівнює 0, кожен рядок наказує React встановити count рівним 1. React групує ці виклики та бачить, що остання інструкція — встановити count рівним 1.
Рішення: Функціональні оновлення Щоб виправити це, потрібно використовувати функціональне оновлення. Воно використовує найсвіжіший стан, доступний у черзі оновлень.
Правильний спосіб: setCount((prev) => prev + 1);
Коли ви використовуєте цей патерн, React надає кожному оновленню найактуальніше значення.
- Перше оновлення: 0 + 1 = 1
- Друге оновлення: 1 + 1 = 2
- Третє оновлення: 2 + 1 = 3
Тепер лічильник дійсно досягає 3.
Поширена помилка Я якось написав: setCount((prev) => { prev + 1 });
Лічильник став undefined. Коли ви використовуєте фігурні дужки у стрілочній функції, ви повинні використовувати ключове слово return. Замість цього використовуйте: setCount((prev) => prev + 1);
Основні висновки:
- React групує кілька оновлень стану для підвищення швидкодії.
- Виклики setState не завжди викликають негайний рендер.
- Стандартні оновлення використовують значення з поточного циклу рендеру.
- Функціональні оновлення використовують останній стан із черги оновлень.
- React використовує внутрішню чергу оновлень (Update Queue) для керування цими змінами.