Как React
обновляет список
Проследите путь от setItems до кадра браузера. В примере у всех <li> есть ключи и один родитель <ul>.
До
[a, b, c]
После[c, a, d]
- Trigger
- Render
- Commit
- Браузер
Шаг 1 / 14
Запросить обновление
Вызов setItems ставит обновление состояния в очередь.
1. Trigger
setItems · [a, b, c] → [c, a, d]
2. React · Render
Текущее дерево Fiber
ul → li(a), li(b), li(c)
Компонент возвращает новые React-элементы
VDOM ·
ul → li(c), li(a), li(d)
Reconciliation · подготовка следующего дерева
Diffing · сопоставление по
key и типу
c и a найдены в текущем дереве. d появился, b исчез.
Рабочее дерево Fiber
ul → li(c), li(a), li(d)
c и a сохраняют связь с DOM-узлами. Отмечены перемещение a после c, вставка d и удаление b.
3. React · Commit
React применяет изменения к реальному DOM
Перемещает существующий
a после c, удаляет b, вставляет d.
aузел 1bузел 2cузел 3
Рабочее дерево Fiber становится текущим
useLayoutEffect, если запланирован
Можно измерить обновлённый DOM.
4. Браузер · от DOM и CSS до кадра
StyleВычисляет стили
LayoutРассчитывает размеры и позиции
PaintГотовит команды рисования
RasterПреобразует команды в пиксели
CompositeСобирает слои
Кадр на экране
[c, a, d]Как объяснить на собеседовании
В Render React вызывает компонент и сопоставляет новые элементы с текущими Fiber. Совпадение типа и ключа среди детей одного родителя позволяет переиспользовать DOM-узел. В Commit React применяет изменения к DOM и делает рабочее дерево текущим.
После мутаций в Commit может выполниться useLayoutEffect. Чтение геометрии может синхронно запустить layout, если браузеру нужно пересчитать размеры. Браузер выполняет нужные для кадра этапы. Паузы в схеме учебные.