Как работает Virtual DOM в React
Как мы знаем, DOM- это древовидная структура, которая используется для отображения элементов на странице. Работа напрямую с DOM может быть достаточно дорогостоящим процессом, т.к. операции с DOM выполняются медленно. React работает не напрямую с браузерным DOM, а через Virtual DOM.
Virtual DOM – это древовидная структура объектов, которая хранится в памяти браузера и хранит элементы страницы. Задача Virtual DOM – определить, что изменилось с точки зрения содержимого элементов или структуры страницы и закоммитить все изменения в реальный DOM.
По своей сути Virtual DOM – это древовидная структура объектов FiberNode (а в целом это FiberTree). FiberNode представляет собой React элемент.
function App () {
return (
<article>
<h2>Title</h2>
<p>Some content</p>
</article>
)
}
Компонент выше содержит четыре FiberNode: App, <article>, <h2>, <p>. Каждый FiberNode содержит ссылки на соседние FiberNode, родительский и дочерний. Рассмотрим основные свойства FiberNode, сопоставив их значения с примером выше:
- child - дочерний элемент. AppFiberNode.child === ArticleFiberNode
- sibling - соседний элемент. H2FiberNode.sibling === PFiberNode
- return - родительский элемент. H2FiberNode.return === ArticleFiberNode
В процессе рендера для того, чтобы узнать о необходимых изменениях, в каждом FiberNode есть свойство alternate. В нем хранится ссылка на копию текущего FiberNode, который был закоммичен в DOM. В процессе рендера происходит сравнение текущего FiberNode и его копии в alternate, и, если они отличаются, то происходит коммит изменений.
indepth.dev/posts/1…in-react
