为什么vue/react中的列表要加key
程序员文章站
2022-04-19 16:08:13
...
列表中为什么要加key,以及为什么用index是不好的(以下vue同样的原理)
遍历对象的每一个属性深度对比是非常消耗性能的
react使用列表的key来进行对比,如果不指定,则默认为index下标,那么,为什么说使用index是不好的呢
- 假设有这样一段代码
const users = [{name: 'jock'}, {name: 'mary'}]
users.map((user, index) => <div key={index}>{user.name}</div>)
它会渲染出这个dom树
<div key='0'>jock</div>
<div key='1'>mary</div>
然后用户做了某个操作,users
被unshift
了一个对象,变成
const users = [{name: 'new-xixi'}, {name: 'jock'}, {name: 'mary'}]
DOM树就会变成这样,前后对比:
<div key='0'>jock</div> | <div key='0'>new-xixi</div>
<div key='1'>mary</div> | <div key='1'>jock</div>
| <div key='2'>mary</div>
- 但是react使用key来识别变化,所以它认为的变化是:
jock ----- new-xixi
mary ----- jock
添加 mary
非常消耗性能??!!
- 但是如果一开始就指定一个合适的key,比如name
users.map(user => <div key={user.name}>{user.name}</div>)
react认为的变化就变成:
| <div key='new-xixi'>new-xixi</div>
<div key='jock'>jock</div> | <div key='jock'>jock</div>
<div key='mary'>mary</div> | <div key='mary'>mary</div>
这样列表就只是做一了个unshift操作
文章只做学习过程中的记录使用