为什么React列表要加key

为什么列表要加key属性,以及为什么用index是不好的

遍历对象的每一个属性进行深度对比是非常耗费性能的

React使用key来进行对比,如果不指定,则默认为index下标

那么,为什么 不指定key/用index下标 是不好的呢?

对于代码:

const users = [{ username: "bob" }, { username: "sue" }]; 
users.map((u, i) => <div key={i}>{u.username}</div>);

它会渲染出这个DOM树:

<div key="1">bob</div>
<div key="2">sue</div>

然后用户对users操作,unshift进另一个对象

const users = [ 
{ username: "new-guy" }, 
{ username: "bob" }, 
{ username: "sue" }, 
];

DOM树前后对比是这样的:

<div key="1">bob</div> | <div key="1">new-guy</div> 
<div key="2">sue</div> | <div key="2">bob</div> 
                                         | <div key="3">sue</div>

由于React是根据key值来识别变化,所以React认为变化是:

  1. bob -> new-guy
  2. sue -> bob
  3. 添加 sue

非常耗费性能

如果我们给它指定一个合适的key

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

则React认为的变化变成:

                                           <div key="c">new-guy</div>
<div key="a">bob</div> | <div key="a">bob</div>
<div key="b">sue</div> | <div key="b">sue</div>

这样就只需要做一个unshift操作,节省性能