Как алгоритм diff реагирует на это предположение?

Question

Я использую реагирование для создания собственного веб-приложения, но мне интересно, как из-за следующего предположения быстрее реагирует на разницу?Другими словами, на что реагирует основанное на этом предположении?

Два элемента разных типов будут создавать разные деревья.

Answer 1

Это предположение позволяет React определить минимальное количество операций для преобразования одного дерева DOM в другое за O (n) раз.

Однако современные алгоритмы имеют сложность впорядок O (n3), где n - количество элементов в дереве.Если бы мы использовали это в React, отображение 1000 элементов потребовало бы порядка одного миллиарда сравнений.Это слишком дорого.

Предполагая, что элементы разных типов имеют разные деревья, реакция сэкономит ценное время вычислений, избегая слишком большого количества сравнений для преобразования одного дерева в другое.Так что без этого, если у вас есть следующая структура

<div>
    <span> </span>
    <span> </span>
</div>

и если ваша новая структура

<span>
    <span> </span>
    <div> </div>
</span>

, React теперь должен будет сравнить, был ли первый дочерний элемент span там или нет.Затем он должен сравнить, есть ли второй дочерний элемент div или нет;теперь он обнаружил, что его там не было, поэтому ему придется только изменить второй div вместе с внешним родительским тегом.(Представьте, что вы делаете это для 1000 элементов)

Они также упомянули

На практике эти предположения действительны почти для всех практических случаев использования.

И из моего опыта почти во всех случаях это всегда так.

Answer 2

React создает и сохраняет точно такую ​​же копию фактического DOM, который называется виртуальным DOM.Это будет иметь все, что есть у фактического DOM, как объекты, их типы и их значения.Всякий раз, когда происходит какое-либо изменение в реальном DOM, реагирует на момент создания обновления его снимок и сравнивает его с виртуальным DOM, основываясь на найденных различиях, и обновляет фактический DOM.

Так что еслиу вас есть два элемента разных типов, будет другое дерево.

Это мое понимание, дайте мне знать, если вы найдете что-то еще.