Почему добавление ключа важно в ReactJS? Давай выясним !
Итак, если вы читаете это, есть вероятность, что вы уже столкнулись с ошибкой, кричащей на вас из-за того, что вы не добавили ключи к элементам при создании своего приложения в реакции. Чаще всего мы сталкиваемся с этим при использовании карты для создания списка элементов, но не предоставляем им ключ. Давайте посмотрим на код ниже:
Приведенный выше код работает совершенно нормально, но также выдает ошибку в консоли «Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключ». Давайте разберемся в причине этой ошибки. Причиной этой ошибки является неэффективность. Теперь вы можете подумать, как не добавление ключа к элементу делает реакцию неэффективной? Позвольте мне объяснить это вам. Взгляните на изображение ниже:
На изображении выше у нас нет ошибок, потому что мы предоставили уникальный ключ для каждого элемента, который помогает эффективно реагировать на работу. Ключи используются React для отслеживания того, какие элементы были изменены, добавлены или удалены. Предположим, у нас есть два примера списка, в одном из которых есть элементы списка с ключами, а в другом — элементы списка без ключей. Взгляните на изображение.
Итак, предположим, мы добавим еще один элемент вверху этого списка. Взгляните на изображение ниже:
Что делает react, так это то, что во время рендеринга он видит, что «Mango» заменен на «Guava», поэтому он создает новый узел в DOM. Точно так же он обнаруживает, что «Банан» заменен на «Манго», поэтому он также создает новый узел для этого. И так до тех пор, пока список не закончится. Напротив, если бы мы добавили ключ к этим элементам, реакция знала бы, что все элементы одинаковы, поскольку он использует их уникальный ключ для отслеживания, добавлен только новый элемент и был бы создан только один узел.
Итак, вы видите разницу между созданием одного узла и созданием пяти узлов. Это определенно приводит к неэффективности, если у нас есть большое количество данных.
По этой причине мы всегда должны добавлять «ключ» к динамически генерируемым элементам списка.
Примечание. Избегайте использования индекса в качестве ключа, поскольку данные в этом индексе могут измениться в любое время. Используйте что-то уникальное для этих данных.
Спасибо, что обнажились со мной. Не стесняйтесь оставлять ценные отзывы. Надеюсь, вы чему-то научились. 😃
