Какова роль ключей в React и Vue?

Какова роль ключей в React и Vue?

Ключ — это уникальный идентификатор, присвоенный каждому vnode, а также стратегия оптимизации для различий. Соответствующий узел vnode можно найти более точно и быстрее на основе ключа.
Когда мы используем v-for, нам нужно добавить ключ к устройству

Если ключи не используются, Vue примет принцип «на месте» : минимизируйте перемещение элементов и постарайтесь исправить или повторно использовать элементы одного и того же типа в одном и том же подходящем месте в максимально возможной степени.

Если используется ключ, Vue запишет элементы в соответствии с порядком ключей.Если элемент, у которого когда-то был ключ, больше не появляется, он будет напрямую удален или уничтожен.

1. Роль ключей в виртуальном DOM

Ключом является виртуальный объект DOM. При изменении данных в состоянии Vue сгенерирует новый виртуальный DOM на основе новых данных , а затем Vue сравнит различия между новым виртуальным DOM и старым виртуальным DOM .

2. Правила сравнения

2.1 В старом виртуальном DOM был найден тот же ключ, что и в новом виртуальном DOM.

• Если содержимое виртуального DOM не изменилось, используйте предыдущий реальный DOM напрямую (повторное использование).
• Если содержимое виртуального DOM изменяется, создается новый реальный DOM, а затем заменяется предыдущий реальный DOM на странице.

2.2 Тот же ключ, что и новый виртуальный DOM, не найден в старом виртуальном DOM.

Создайте новый реальный DOM, а затем отобразите его на странице.

3. Проблемы, которые могут возникнуть при использовании индекса в качестве ключа

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

4. Как выбрать ключ при разработке?

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