Реагировать на согласование экземпляров компонентов

Question

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

Меня смущает то, как сравниваются два экземпляра реакции. Например, при сравнении <Comp1/>в старом дереве элементов реакции и <Comp2/>в новом дереве элементов реакции (предположим, что <Comp2>заменены <Comp1>при создании нового дерева) алгоритм сравнения просто сравнивает атрибуты «типа» обоих реагирующих элементов? Итак, если оба имеют одинаковый «тип», то алгоритм сравнения не учитывает размонтирование и монтирование в DOM?

Answer 1

алгоритм сравнения просто сравнивает атрибуты «типа» обоих реагирующих элементов?

Да, из документов:

Всякий раз, когда корневые элементы имеют разные типы, React снесет старое дерево и построит новое дерево с нуля. Переход от <a>к <img>, или из <Article>к <Comment>, или из <Button>к <div>- любой из них приведет к полной перестройке.

Еще ваш вопрос:

Итак, если оба имеют одинаковый «тип», то алгоритм сравнения не учитывает размонтирование и монтирование в DOM?

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

---

Вы можете увидеть в примере ниже:

• Первое место, где мы визуализировали , не размонтируется, когда мы заменяем его другим (из-за того же типа).
• Второе место, где мы использовали , как только мы заменим его на B, реагирует на размонтирование A.