Что такое виртуальный DOM?

• Виртуальная модель DOM - это представление реальной модели DOM в памяти . Это концепция, используемая React для предотвращения ненужных обновлений реальной / фактической DOM после каждого изменения, поскольку обновления фактической DOM довольно дороги с точки зрения производительности.
• Виртуальная модель DOM - это, по сути, дерево узлов, состоящее из компонентов React. Он создается при выполнении функции render () в React . В этом дереве узлов перечислены элементы DOM, их атрибуты и содержимое как объекты и свойства.
• Всякий раз, когда происходят изменения в данных (состоянии / реквизитах) существующего дерева узлов, то есть виртуального DOM, React создает новый виртуальный DOM, чтобы включить эти изменения. Если никаких изменений не наблюдается, виртуальный DOM остается прежним. Только когда виртуальный DOM изменяется, он сравнивается с предыдущим представлением DOM. Если обнаруживается различие, актуальная модель DOM обновляется.

Когда свойства / состояние компонента меняются, метод render () React создает новую виртуальную модель DOM. React решает, вносить ли изменения в фактическую модель DOM, основываясь на различиях между предыдущим представлением DOM и вновь созданной виртуальной DOM. Этот процесс известен как примирение .

Работа виртуального DOM:

1. Всякий раз, когда какие-либо базовые данные изменяются, весь пользовательский интерфейс повторно отображается в представлении Virtual DOM.

3. По завершении расчета реальная DOM обновляется только с внесенными изменениями.

Алгоритмы различения:

Согласование в React, то есть необходимость обновлять фактическую DOM на основе изменений в Virtual DOM, основано на многих алгоритмах различения. Современные алгоритмы сравнения обычно имеют временную сложность O (n3) .

Это означает, что для 1000 элементов React должен будет выполнить 1 МИЛЛИАРД сравнений, чтобы определить, обновлять ли фактическую DOM или нет. Ясно, что это было бы слишком дорого с точки зрения производительности. Вместо этого в React есть определенные эвристические алгоритмы, которые имеют временную сложность O (n) на основе двух предположений:

1. Два элемента разных типов будут давать разные деревья.
2. Разработчики могут указывать / намекать, какие дочерние элементы могут быть стабильными при рендеринге с помощью ключевого свойства.

• Добавление ключей к дочерним элементам в React может помочь эффективно обновить фактическую модель DOM, поскольку ключи обеспечивают стабильную идентификацию дочерних элементов.
• Когда у дочерних элементов есть ключи, React использует ключи для сравнения потомков предыдущего дерева узлов с потомками нового дерева узлов.
• Эти ключи упрощают работу React по определению, где вставлять, удалять или обновлять дочерние узлы, что делает его намного более эффективным.

<ul>
   <li key="996">Item 1</li>
   <li key="997">Item 2</li>
</ul>

<ul>
   <li key="995">Item 3</li>
   <li key="996">Item 1</li>
   <li key="997">Item 2</li>
</ul>

Примечание. Ключи должны быть стабильными, предсказуемыми и уникальными. Нестабильные ключи (например, созданные с помощью Math.random()) вызовут ненужное воссоздание многих экземпляров компонентов и узлов DOM, что может вызвать снижение производительности и потерю состояния дочерних компонентов.

Для получения дополнительных сведений о том, как эти алгоритмы работают для различных типов элементов DOM, посетите https://reactjs.org/docs/reconciliation.html