Оригинал - twitter
Переведено при поддержке Devник
Каждый рендер похож на кадр в фильме. React не знает, что вы сделали со своими данными. Он видит только JSX из предыдущего рендера, а затем из следующего рендера.
http://circles.map(c => <Circle color={c.color} />)
Расскажи мне, что случилось с кругами. Если вы посмотрите достаточно внимательно, вы поймете, что есть две разные возможные интерпретации того, что произошло!
- Может, второй и третий круги поменялись местами…
- А может второй круг стал синим, а первый стал желтым!
| 1 | 2 |
|---|---|
 |
 |
Обычно это не имело бы значения. Но представьте, что у каждого круга есть состояние внутри. Как флажок или поле ввода. Тогда разница между «движением» и «изменением» становится значительной! В первом случае вы хотите также переместить состояние. Во втором случае нет.
Так что же такое ключи? Ключи - это подсказка, которую вы даете React, чтобы он знал, какой из двух случаев произошел в данный момент
http://circles.map (c => <Circle color = {http://circle.id} />)
Это способ обозначить для React, «что делает два круга одинаковыми даже между рендерами».
| 1 | 2 |
|---|---|
 |
 |
React не может создать хороший ключ. Только вы знаете, как структурированы ваши данные и являются ли два круга в двух визуализациях «одним и тем же» кругом концептуально (даже если все его данные изменились) или нет. Обычно вы используете идентификатор, сгенерированный при создании данных. Например, из базы данных.
Если вы не укажете ключ в списке, React вернется к использованию индекса. И, конечно, вы также можете сами передать index в качестве ключа.
Это не обязательно «неправильно», «медленно» или что-то в этом роде. Просто вы говорите React: «Я обещаю, что круги никогда не меняют порядок».
Что произойдет, если каждый раз передавать случайный ключ? Итак, вы говорите React, что круги никогда не одинаковы между рендерами. Поэтому, если у вас есть какое-то состояние внутри них, оно будет потеряно после каждого повторного рендеринга. React уничтожит и воссоздает каждый круг, потому что вы ему сказали.
И это принцип, лежащий в основе ключей! Это не то, что React может угадать или автоматизировать для вас, потому что вы единственный человек, который знает, имели ли вы в виду «эти элементы были перемещены / вставлены / удалены» или «эти элементы изменили свое содержимое». Больше никто этого не знает.
Почему React не «угадывает», что произошло с моим массивом? Во-первых, с точки зрения React, ваш массив каждый раз полностью меняется - это новая копия.
Но даже если бы React действительно отслеживал ваши изменения, этого было бы недостаточно! В любом случае повторная выборка данных даст вам новые массивы.
Ключи предназначены не только для массивов. Они определяют идентичность компонента - это «одинаковый» или «разный» компонент между повторными рендерингами.
В долгосрочной перспективе, когда React получит встроенную глубокую поддержку анимации, ключи также будут играть здесь большую роль. Подумайте об этом: разница между «перемещением / добавлением / удалением» и «обновлением» становится очевидной! Если вещи появляются и исчезают так, как вы не планировали, ключ плохой.