Привет еще раз! Я вернулся и несу больше знаний, чем когда-либо!
Позвольте мне начать с того, что я ЛЮБЛЮ React. React.js — это удивительный способ выразить себя или свой бизнес с помощью кода, но он имеет свои небольшие нюансы, в том числе ключи, необходимые для сопоставления.
Когда вы сопоставляете в React, каждый раз вам потребуется «ключевой» компонент. Поначалу мне было немного трудно осознать это. Кажется, я даже потратил около часа, пытаясь пройти определенный тест, связанный с картированием, но не мог понять, что происходит. У меня было две функции, которые использовали сопоставление, только одна функция визуализировалась на странице визуально, и я включил ключ. Так почему же я получаю сообщение об ошибке «Каждый дочерний элемент в массиве или итераторе должен иметь уникальный ключевой реквизит»?
Я попытался изменить ключ с идентификатора элемента на имя элемента в массиве. Я попытался переместить функцию на компонент верхнего уровня и передать ее как опору. Я даже пытался найти способ не использовать карту, но в итоге картографирование стало неотъемлемой частью приложения. Я чувствовал, что перепробовал все и что ошибка была не по моей вине, а в том, что тест был нарушен. В конце концов, вещи ломаются, верно?
Перенесемся к тому моменту, когда я наконец нашел в себе смелость обратиться за поддержкой к техническому тренеру. Изучив мой код, мой технический тренер сказал мне, что в конце концов я не делал ничего плохого с этой конкретной функцией, но я забыл добавить ключ в другой раз, когда использовал карту. Услышав это, я не испытал ага-момент, вместо этого я сидел в замешательстве. Я думал, что для сопоставления нужен ключ только тогда, когда это было то, что визуально отображалось на странице, и я очень ошибался!
Ключи очень нужны итераторам, независимо от того, визуализируются они на странице или нет. Они не только полезны, но и являются важным фактором во многих приложениях. Это связано с тем, что они предоставляют способ идентификации элементов в списке, поскольку эти элементы могут быть обновлены, изменены или удалены. Эти функции обычно выполняются через запрос на выборку, но также очень необходимы, когда вы хотите изменить отображение приложения без необходимости повторной загрузки или повторного рендеринга страницы.
Что касается запроса на выборку, ключ позволяет клиенту определить, какой элемент необходимо обновить/изменить или удалить, вместо того, чтобы вызывать мутацию или удаление неправильных элементов. Это обеспечивает положительный опыт работы с клиентами и правильное использование данных.
Давайте посмотрим, что может произойти, если ключ не будет передан. Первое, что вы можете заметить, это предупреждение об ошибке: «Каждый дочерний элемент в массиве или итераторе должен иметь уникальный ключ». Надеюсь, это достаточно раздражает, чтобы вы захотели добавить ключевое свойство, но если нет, то вы смотрите на мир, полный интересных и запутанных ошибок, которые, скорее всего, омрачат ваше приложение.
Скажем, в списке три элемента: 1, 2 и 3. К сожалению, вы забыли элемент 0 и хотите, чтобы список состоял из 0, 1, 2, 3. Без использования ключей React вместо этого изменит все элементы. просто добавить элемент в начале. Это может вызвать задержку, поскольку React применяет изменения ко всем элементам. Используя ключи, React знает, что он может сохранить 1, 2 и 3, просто добавив 0 в начале вместо того, чтобы заставлять все меняться.
Хотя вы хотите, чтобы это можно было автоматизировать, это не совсем простая вещь. Единственный вариант, который есть у React для автоматизации, — использовать индекс, который является их процедурой по умолчанию! Но это не так удивительно, как кажется, на самом деле это не одобряется и рекомендуется только тогда, когда ничего другого нельзя использовать. Если массив отфильтрован, то изменится индекс элемента, возможно, всех элементов. Если массив отсортирован, произойдет то же самое. Это также применяется при добавлении к середине массива и т. д. и т. п. Изменение индекса может привести к нежелательным мутациям, так как выполняется больше функций, поскольку ключи являются единственным источником, который DOM использует для идентификации элементов. При этом, пожалуйста, не используйте индекс в качестве ключа! Вы можете в конечном итоге изменить или удалить что-то, что вы действительно хотели сохранить в своем приложении.
Хотя ключи могут быть сложными, именно они позволяют создать чистое и полезное приложение. Хотя поначалу я столкнулся с некоторыми проблемами, сейчас я так благодарен за них, и это одна из моих любимых частей React.
