Я основной автор модуля virtual-dom , поэтому я могу ответить на ваши вопросы. На самом деле есть 2 проблемы, которые необходимо решить здесь
- Когда мне сделать рендеринг? Ответ: Когда я наблюдаю, что данные грязные.
- Как мне эффективно сделать рендер? Ответ: Использование виртуального DOM для создания реального патча DOM
В React каждый из ваших компонентов имеет состояние. Это состояние похоже на наблюдаемое, которое вы можете найти в нокауте или других библиотеках стилей MVVM. По сути, React знает, когда нужно заново визуализировать сцену, потому что он способен наблюдать, когда эти данные изменяются. Грязная проверка выполняется медленнее, чем наблюдаемые, потому что необходимо регулярно опрашивать данные и рекурсивно проверять все значения в структуре данных. Для сравнения, установка значения для состояния будет сигнализировать слушателю, что какое-то состояние изменилось, поэтому React может просто прослушать события изменения состояния и поставить в очередь повторный рендеринг.
Виртуальный DOM используется для эффективного повторного рендеринга DOM. Это на самом деле не связано с грязной проверкой ваших данных. Вы можете выполнить рендеринг с использованием виртуального DOM с грязной проверкой или без нее. Вы правы в том, что при вычислении различий между двумя виртуальными деревьями возникают некоторые накладные расходы, но виртуальная разность DOM заключается в понимании того, что необходимо обновить в DOM, а не в том, изменились ли ваши данные. Фактически, алгоритм diff сам по себе является грязной проверкой, но он используется, чтобы увидеть, не является ли DOM грязным.
Мы стремимся перерисовывать виртуальное дерево только при изменении состояния. Таким образом, использование наблюдаемой для проверки, изменилось ли состояние, является эффективным способом предотвращения ненужных повторных визуализаций, которые могут привести к большому количеству ненужных различий дерева. Если ничего не изменилось, мы ничего не делаем.
Виртуальный DOM хорош, потому что он позволяет нам писать наш код, как будто мы перерисовываем всю сцену. За кулисами мы хотим вычислить операцию исправления, которая обновляет DOM, чтобы посмотреть, как мы ожидаем. Таким образом, хотя алгоритм DOM diff / patch виртуальных DOM, вероятно, не является оптимальным решением , он дает нам очень хороший способ выразить наши приложения. Мы просто объявляем, чего именно хотим, и React / virtual-dom решит, как сделать вашу сцену такой. Нам не нужно вручную манипулировать DOM или запутываться в предыдущем состоянии DOM. Нам также не нужно перерисовывать всю сцену, что может быть гораздо менее эффективно, чем ее исправление.
