前言
大家应该都知道，在 React 中 render collections 的 items 时,Keys 扮演着重要的角色,它直接决定接下来的 rendered 和 re-rendered，下面话不多说，来一起看看详细的介绍：
React 不会 render 重复的 keys
为了彻底明白这个,我们来声明一个这样的数组
rush:js;">
const nums = [1,2,3,5,2]; // 它有两个元素的值是相等的
现在,我们在 react 中来 render
rush:xhtml;">
-
{nums.map(num =>
- {num} )}
这小段代码构造出的理想 element 结构,应该是这样的
rush:xhtml;">
然而,实际 DOM 是这样的
rush:xhtml;">
- 1
- 2
- 3
- 5
React 给出了以下warning
意思就是,你必须为数组中的元素提供唯一的 key 值
React 会 re-render 某个 key 指向的内容发生变化的元素
users.map((u,i) =>
{u.username}
);
render 的结果如下
rush:xhtml;">
现在,我们更新一下 users
rush:js;">
const users = [
{username:'joe'},{username:'bob'},{username:'sue'}
];
render 的结果将会改变如下
rush:xhtml;">
在上面例子中,React 调用了它的 Reconciliation 算法,然后把返回的结果也就是一个 key 为 sue 的新元素添加到了 users 的最前面
如何选择 Key
其实,即使内容没有发生变化,改变对应的 key 值,React 也会触发 re-render.
使用 map 函数的 index 来作为元素的 key,对开发者来说是常见的,因为有时这是必要的,然而,有时这也会导致性能下降问题
{u.username}
);
还是以上的例子,作了一点小小的改变后,React 瞬间由一个步骤变成了三个步骤:
- 将 id 为 "1" 的元素从 "bob" 更改为 "joe"
- 将 id 为 "2" 的元素从 "sue" 更改为 "bob"
- 新增一个 id 为 "3" 的元素,他的值为 "sue"
总结
所以,当我们使用 collections 时,不仅不能忘了 Key,还要学会选择好的 Key.
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接: nofollow" target="_blank" href="http://t.cn/R9KKZ9k">Why you need keys for collections in React
