在 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 值

我们来看一个向 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

const users = [
  {username:'joe'},{username:'bob'},{username:'sue'}
];

render 的结果将会改变如下

<div key="joe">joe</div>
<div key="bob">bob</div>
<div key="sue">sue</div>

在上面例子中,React 调用了它的 Reconciliation 算法,然后把返回的结果也就是一个 key 为 sue 的新元素添加到了 users 的最前面

其实,即使内容没有发生变化,改变对应的 key 值,React 也会触发 re-render.

使用 map 函数的 index 来作为元素的 key,对开发者来说是常见的,因为有时这是必要的,然而,有时这也会导致性能下降问题

users.map((u,i) =>
  <div key={i}>{u.username}</div>);

还是以上的例子,作了一点小小的改变后,React 瞬间由一个步骤变成了三个步骤:

所以,当我们使用 collections 时,不仅不能忘了 Key,还要学会选择好的 Key.