Virtual DOM and Internals

Що таке віртуальний DOM?

Віртуальний DOM (VDOM) - це концепція програмування, в якій ідеальне чи «віртуальне» представлення інтерфейсу користувача зберігається в пам’яті і синхронізується зі «справжнім» DOM за допомогою бібліотеки, такої як ReactDOM. Цей процес називається узгодженням.

Власне такий підхід і робить API React декларативним: ви вказуєте React, у якому стані повинен знаходитись інтерфейс користувача, а React, у свою чергу, вже домагається того, щоб DOM відповідав цьому стану. Це абстрагує маніпуляції з атрибутами, обробку подій та оновлення DOM вручну, які, в іншому випадку, довелося б використовувати при розробці додатків.

Оскільки «віртуальний DOM» - це швидше патерн, ніж конкретна технологія, цим терміном іноді позначають різні поняття. У світі React термін «віртуальний DOM» зазвичай асоціюється з React елементами, оскільки вони є об’єктами, що представляють інтерфейс користувача. Однак, React також використовує внутрішні об’єкти, так звані «волокна» (fibers) для зберігання додаткової інформації про дерево компонентів. Вони також можуть вважатися частиною реалізації «віртуального DOM» в React.

Чи схожий тіньовий DOM на віртуальний DOM?

Ні, вони є зовсім різними. Тіньовий DOM (Shadow DOM) - це браузерна технологія, призначена, головним чином, для визначення області видимості змінних та CSS у веб-компонентах. Віртуальний DOM - це концепція, реалізована бібліотеками в JavaScript поверх API браузера.

Що таке «React Fiber»?

Fiber - це новий механізм узгодження в React 16, його основна мета полягає в тому, щоб зробити рендеринг віртуального DOM поступовим. Довідатись більше про це.