Что делает реконсилер: render vs commit

Вы вызываете setState. Где-то между этим вызовом и сменой пикселя на экране React решил, какие компоненты перезапустить, сравнил два дерева, вычислил минимальный набор мутаций DOM и применил их — возможно, остановившись на полпути, чтобы пропустить нажатие клавиши. Машина, которая это делает, — fiber-реконсилер.

Что делает реконсилер. Когда ваши данные меняются, React вычисляет наименьший набор изменений страницы, совпадающий с новыми данными, и применяет только их. DOM медленно мутировать — тронуть его тысячу раз намного медленнее, чем тронуть десять. Вся работа React — вычислить десять реальных изменений вместо слепого повтора тысячи.

Метафора чертежа. Наивный строитель снёс бы дом и отстроил с нуля при каждом изменении чертежа. React — умный строитель: он держит текущий чертёж приколотым к стене, рисует новый на втором листе, кладёт два рядом и отмечает только различия. Потом он шлёт бригаде один наряд работ ровно с этими изменениями. Рисование второго чертежа — фаза render; передача наряда бригаде — фаза commit.

Почему две фазы. React делит каждое обновление на две фазы. Фаза render обходит дерево компонентов, запускает функциональные компоненты и строит новое дерево узлов fiber — эта фаза чистая, не производит видимых изменений и с React 18 может быть приостановлена, возобновлена или выброшена. Фаза commit берёт готовое новое дерево и применяет мутации DOM одним синхронным, непрерываемым взрывом. Всё хорошее и всё опасное в производительности React живёт в зазоре между «прерываемым render» и «атомарным commit».

Антон · Браузер печатает в поле поиска, фильтрующем длинный список. Дима · Origin-сервер комментирует: «Каждое нажатие — это изменение состояния. React перезапускает компоненты, строит новое fiber-дерево, диффит его против текущего. Список из 800 строк изменился — но React находит только 12 строк, которые реально отличаются, и мутирует только эти 12 DOM-узлов. Остальные 788 не тронуты. Поэтому поле всё ещё ощущается мгновенным».