Как работает React Key
Я прочитал эту статью о том, «почему использование индекса в качестве ключа - это антипаттерн», и мне стало любопытно, почему мой проект так хорошо работает с ключевой матрицей на основе индекса.
Я работал над проектом тетриса, и каждую секунду матрица с 20 * 24 ячейками перерисовывала и перемещала тетромино. Каждая ячейка массива включает в себя алфавит, и он становится className подразделения и определяет цвет ячейки, и каждую секунду, когда тетромино движется, он работает очень хорошо.
Из примера его статьи и этого вопроса , если ключ не изменяется, реакция не изменяет этот элемент DOM и не добавляет новый DOM для нового элемента в массиве. Так что мой этап тетриса не должен обновлять вид, потому что ключ не меняется. Я так запутался, как работает клавиша реакции.
Я искал много статей, но смог найти только то, что они используют для оптимизации и сравнения DOM, но не как. Итак, я хочу знать, как работает ключ и какую процедуру они выполняют для сравнения перед изменением Virtual Dom и после изменения Virtual DOM.
2 ответа
Самостоятельная реакция, когда не используется атрибут «ключ», не очень эффективна при сравнении списков, если элемент в начале списка изменен или вставлен.
Если вы вставите элемент в начало вашего списка, React повторно отрендерит весь список, а не просто добавит вставленный элемент (если у вас не установлен ключевой атрибут). То же самое применимо, если вы используете ключ на основе индекса, поскольку ключ всех элементов изменится при вставке, и, следовательно, весь список будет повторно отображен.
При правильно установленном ключевом атрибуте react может определить, какой элемент был вставлен или изменен, и повторно отобразить только эту часть списка. Вы можете найти подробный пример и объяснение в React Docs в Recursing On Children and Keys.
Вы можете проверить этот эффект, если воспользуетесь расширением браузера «React Dev Tools» . С активным расширением вы можете делать следующее:
- открыть инструменты разработчика браузера
- попал на вкладку "Компонент"
- перейти во вкладку настроек (значок шестеренки)
- переключить «Выделять обновления при рендеринге компонентов».
- попробуйте вставить элемент в начало списка без ключа, а затем снова со списком, который использует уникальные ключи, проверьте, какие компоненты обновляются
Использование ключа на основе индекса будет работать нормально, однако с точки зрения производительности это не очень эффективно в случаях, когда динамический список обновляется с более низкими индексами.
Ключ похож на идентификатор элемента, использование индексов - плохая практика, потому что если один из элементов изменит свою позицию в списке, весь список будет перерисован, вы, вероятно, сможете найти случаи, когда это не так сильно повлияет на вашу производительность, но я думаю, что это дурная привычка.
проверьте это: Почему ключи важны в React