首页 > 其他 > 详细

react中key的使用

时间:2019-07-15 09:55:21      阅读:91      评论:0      收藏:0      [点我收藏+]

面试题:
1). react/vue中的key的作用/内部原理
2). 为什么列表的key尽量不要用index

  1. 虚拟DOM的key的作用?
    1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用
    2). 详细的说: 当列表数组中的数据发生变化生成新的虚拟DOM后, React进行新旧虚拟DOM的diff比较
    a. key没有变
    item数据没变, 直接使用原来的真实DOM
    item数据变了, 对原来的真实DOM进行数据更新
    b. key变了
    销毁原来的真实DOM, 根据item数据创建新的真实DOM显示(即使item数据没有变)

    1. key为index的问题
      1). 添加/删除/排序 => 产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
      2). 如果item界面还有输入框 => 产生错误的真实DOM更新 ==> 界面有问题
      注意: 如果不存在添加/删除/排序操作, 用index没有问题

    2. 解决:
      使用item数据的标识数据作为key, 比如id属性值

    3. 什么时候可以用index作为key
      不能有: 添加/删除/排序
      可以有: 更新元素内部的数据

react中key的使用

原文:https://www.cnblogs.com/korea/p/11186834.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!