欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

为什么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>

然后用户做了某个操作,usersunshift了一个对象,变成

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操作

文章只做学习过程中的记录使用