专栏首页coding个人笔记vue和react中循环key的作用

vue和react中循环key的作用

没用过react开发项目,但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候,vue会警告。但是这个key的作用是什么。

vue官方文档:

当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

上面是vue官网的原文,简单的解释就是,key给每一个元素提供了唯一的类似id的属性,依靠这个key可以更快速更准确的对比新旧虚拟DOM,提高性能。但是,不带key,渲染简单的数据,反而会更快。

看一个例子:

不带key:

带key:

很容易看出,带key的列表在新增的时候,我选中了第一个,新增之后选中的还是第一个,也就是说新增的是就地复用,而带key的是直接新增节点。

在这个过程,diff算法应该是判断新旧树是否相同,相同就复用,不相同就删除旧的创建新的。带key的当然是每次新增都找不到可复用节点,要删除和创建,对性能影响更大。而不带key时节点的就地复用,省去了删除和创建的开销,只需要修改内容,所以刻意默认行为以获取性能上的提升。

两个图也应该很明显的表现出不带key会带来一些隐藏的副作用,比如上图的状态错位。其实在我看来,带key和不带key虽然有性能上的争议,但是对于用户来说基本没什么区别,为了消除一些异常,建议还是带上key。

最后总结一下,key对于diff算法的性能有影响,针对简单的渲染,不带key性能更好,针对复杂的渲染带key性能更好。至于这个复杂渲染的程度,暂时也是不知。而不带key会有一些隐藏的副作用,所以建议带上唯一的key。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue mixins原理

    以前一直以为mixins在vue里面应该不是很重要,只是提供了一个混入的api,慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的...

    wade
  • localStorage和sessionStorage

    在以前,想要存储数据在本地中只有cookie,而cookie又被限制了大小,在不同浏览器只能存储4k左右的cookie。于是H5新增了本地存储localStor...

    wade
  • Proxy实现监听

    之前分享过vue2的响应式,然后有人问vue3用proxy是怎么实现的,本来打算研究一波,看了源码之后,发现自己想多了,所以改成学一学proxy的使用。

    wade
  • redis

    1)Redis:REmote DIctionary Server(远程字典服务器)

    用户2337871
  • 网银安全控件问题

    网银的密码输入控件是通过直接读键盘设备IO获取的输入。需要使用驱动级的键盘模拟输入技术才能输进去。

    周小董
  • 深入浅出 Vue 中的 key 值

    前几天我写了一篇文章,sortable.js——Vue 数据更新问题 ,当时自己只是从数据的强制刷新角度去分析,而且并没找到真正的“元凶”。

    GopalFeng
  • Redis学习笔记 -- 2

    Redis 字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下:

    用户1637228
  • Redis常用命令整理

    端碗吹水
  • redis

    (redis.memcache(内存数据库,高速缓存),mongodb(文档数据库))

    Dean0731
  • Redis系列(十一)redis命令全集

    总的来说,Redis 是一个基于内存的高性能的键值型数据库,也就是常说的 NoSQL, 可以用来作为数据库或者缓存。并且支持多种数据结构,包括字符串,散列,列表...

    呼延十

扫码关注云+社区

领取腾讯云代金券