В прошлой части мы узнали, как визуализировать массив элементов React, но в нем отсутствует важная часть. Ключи реакции!

Предупреждение. У каждого дочернего элемента в списке должен быть уникальный ключевой реквизит. Проверьте метод рендеринга приложения. См. https://reactjs.org/link/warning-keys для получения дополнительной информации.

Каждый элемент/компонент, который мы визуализируем, React отслеживает его, чтобы впоследствии эффективно отображать представления на основе обновлений состояния.

Ключи становятся довольно важными, когда мы визуализируем список элементов вместе.

Ключи используются для уникальной идентификации элементов в списке. Без ключей React становится сложно обновлять представления.

Рассмотрим сценарий, в котором мы можем перемещать элементы в списке в зависимости от их приоритета. В этом сценарии изменяется только порядок элементов, а все остальное остается прежним.

Теперь, если у React нет Keys, это означает, что React не идентифицирует порядок и не знает, почему Element перемещается из какого места в какое место. Таким образом, вместо того, чтобы просто обновлять представления на основе нового порядка, он уничтожает и заново создает компонент.

Это также называется размонтированием и повторным подключением компонентов.

Это очень затратная операция. Основное преимущество создания веб-приложений с помощью React заключается в том, что у него есть отличный алгоритм согласования, который ускоряет обновления DOM, и ключ играет в этом очень важную роль.

Без ключей мы упускаем преимущества React.

В следующих частях я расскажу о том, что такое монтирование и размонтирование компонентов, что поможет нам лучше понять работу Keys!

Ресурсы

Спасибо

Первоначально опубликовано на https://www.linkedin.com.