React中使用collections时key的重要性详解
需积分: 0 118 浏览量
2020-12-04
04:06:02
上传
评论
收藏 63KB PDF 举报
React中使用中使用collections时时key的重要性详解的重要性详解
前言前言
大家应该都知道，在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-
rendered，下面话不多说，来一起看看详细的介绍：
React 不会不会 render 重复的重复的 keys
为了彻底明白这个, 我们来声明一个这样的数组
const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的
现在, 我们在 react 中来 render
<ul>
{nums.map(num => <li key={num}>{num}</li>)}
</ul>
这小段代码构造出的理想 element 结构, 应该是这样的
<ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
<li key="5">5</li>
<li key="2">2</li>
</ul>
然而, 实际 DOM 是这样的
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>5</li>
</ul>
React 给出了以下warning
意思就是, 你必须为数组中的元素提供唯一的 key 值
React 会会 re-render 某个某个 key 指向的内容发生变化的元素指向的内容发生变化的元素
我们来看一个向 users 集合添加 user 的例子
const users = [
{username:'bob'},
{username:'sue'}
];
users.map((u, i) =>
<div key={u.username}>{u.username}</div>);
render 的结果如下
<div key="bob">bob</div>
<div key="sue">sue</div>
现在, 我们更新一下 users
资源评论
