为什么列表要加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认为变化是:
- bob -> new-guy
- sue -> bob
- 添加 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操作,节省性能