Virtual DOM
Виртуальный DOM
Множество уже существующих фреймворков до React, которые выходили на эту нишу, управляли DOM напрямую при каждом изменении.
“Реальный” DOM
Что такое DOM, для начала. DOM (Document Object Model) это древовидное представление структуры страницы, начинающееся с <html> тега и идущее вниз по каждому потомку, которые называются узлами.
Оно хранится в памяти браузера и напрямую ссылается на то, что вы видите на странице. У DOM есть API, которое вы можете использовать, чтобы ориентироваться в нем, получать доступ к каждому узлу, фильтровать их и модифицировать.
У API довольно знакомый синтаксис, которые вы возможно уже видели много раз, если вы не использовали абстрактный API, который представлен в JQuery и его друзях:
React хранит копию представления DOM, для чего React рендерит: Виртуальный DOM.
Объясняем, что такое виртуальный DOM
Каждый раз, когда DOM изменяется, браузер делает две объемные операции: перерисовывает (изменения в контенте или визуальные изменения, которые не влияют на шаблон и позиционирование относительно других элементов) и совершает reflow (то есть перерасчитывает разметку части страницы — или разметку вообще всей страницы)
React использует виртуальный DOM, чтобы помочь браузеру использовать меньше ресурсов, когда нужно сделать какие-либо изменения на странице.
Когда вы вызываете setState() на компоненте, указывая состояние отличающееся от предыдущего, React отмечает такой компонент как грязный. Это ключевой момент: React обновляется только тогда, когда компонент явно изменяет состояние.
Что происходит дальше:
React обновляет виртуальный DOM относительно компонентов, отмеченных как грязные (с некоторыми дополнительными проверками, такими как триггеринг shouldComponentUpdate())
Запускается алгоритм сравнивания, для согласовывания изменений.
Изменяется реальный DOM
Почему виртуальный DOM полезен: группировка
Ключ тут в том, что React группирует множество изменений и делает уникальное обновление в реальном DOM, изменяя все элементы, которые должны быть изменены в одно время, таким образом, перерисовка и reflow в браузере происходят за один раз.
Last updated