Коммит изменений
После того как в фазе рендера (реконсиляции) определены все изменения, нужно внести их в реальный DOM - наступает фаза коммита изменений.
На данный момент мы имеем полностью построенное workInProgress-дерево: для каждого Fiber-узла в нем создан соответствующий DOM-элемент и проставлены все необходимые флаги.
Тут работает функция commitMutationEffects(root, finishedWork, lanes), где finishedWork - это корень (HostRoot) нового дерева.
Под капотом там довольно много всего, но основная идея - пошаговое внесение изменений:
⁃ сначала удаляется то, что нужно удалить
⁃ потом вставляется то, что нужно вставить
Возможно, позже вернусь к этому.
https://jser.dev/2023-07-14-initial-mount/#how-react-does-initial-mount-first-time-render- тут в конце статьи есть прекрасная презентация, визуально показывающая последовательность действий при первом рендеринге
#react #подкапотом #fiber
После того как в фазе рендера (реконсиляции) определены все изменения, нужно внести их в реальный DOM - наступает фаза коммита изменений.
На данный момент мы имеем полностью построенное workInProgress-дерево: для каждого Fiber-узла в нем создан соответствующий DOM-элемент и проставлены все необходимые флаги.
Тут работает функция commitMutationEffects(root, finishedWork, lanes), где finishedWork - это корень (HostRoot) нового дерева.
Под капотом там довольно много всего, но основная идея - пошаговое внесение изменений:
⁃ сначала удаляется то, что нужно удалить
⁃ потом вставляется то, что нужно вставить
Возможно, позже вернусь к этому.
https://jser.dev/2023-07-14-initial-mount/#how-react-does-initial-mount-first-time-render- тут в конце статьи есть прекрасная презентация, визуально показывающая последовательность действий при первом рендеринге
#react #подкапотом #fiber
jser.dev
How does React do the initial mount internally?
Initial mount is the first render for a React app, it creates the internal Fiber Tree and also the DOM tree.
👍4