美文网首页
react/vue 项目为什么要在列表加key,作用是什么

react/vue 项目为什么要在列表加key,作用是什么

作者: 两年半练习程序员 | 来源:发表于2021-03-02 10:48 被阅读0次

    尽可能的复用DOM!!!!!!!!!!!!!!!!!!!!!

    react/vue 项目为什么要在列表加key,作用是什么?

    key 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。
    key 值是每一个 vnode 的唯一标识,依靠 key,我们可以更快的拿到 oldVnode 中相对应的节点

    不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。(就地更新策略)
    tip:可以提高性能,但有安全隐患,对于依赖于子组件状态或者临时 DOM 状态的,这种模式是不适用的,
    比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条还是红色样式

    使用 key 时,它会基于 key 的变化重新排列元素顺序
    tip:可以用于强制替换元素/组件而不是重复使用它,完整地触发组件的生命周期钩子,触发过渡。
    比如渲染一个数组,然后把第一条的颜色改为红色,再去删除第一条数据,第一条不是红色样式

    相关文章

      网友评论

          本文标题:react/vue 项目为什么要在列表加key,作用是什么

          本文链接:https://www.haomeiwen.com/subject/xivofltx.html