美文网首页
React虚拟dom中的key值

React虚拟dom中的key值

作者: bryan_liu | 来源:发表于2022-06-09 09:37 被阅读0次

1.虚拟dom中key的作用:
(1)简单的说,key是虚拟dom对象的标识,在更新显示时key起着及其重要的作用;
(2)当状态中的数据发生变化时,react会根据新数据生成新的虚拟dom,随后React进行新旧虚拟dom的diff比较,规则如下:
(a)旧虚拟dom中找到了与新虚拟dom相同key:
(1)若虚拟dom中内容没变,直接使用之前的真实dom;
(2)若虚拟dom中内容变了,则直接生成新的真实dom,随后替换掉页面中之前的真实dom;
(b)旧虚拟dom中未找到与新虚拟dom相同key,根据数据创建新的真实dom,随后渲染到页面
2.用index作为key可能会引发的问题:
(1)若对数据进行如下操作:逆序添加,逆序删除等,会产生没必要的真实dom更新(界面效果没问题,效率低);
(2)如果结构还包含输入类的dom,会产生错误dom更新(界面有问题);
(3)如果不存在对数据进行逆序添加、删除等破坏顺序操作,仅用于渲染列表等,使用index作为key是没有问题;
3.开发中如何选择key:
(1)最好使用每条数据的唯一标识作为key,比如id、身份证号等;
(2)如果确定只是简单的数据展示,使用index作为key值即可。

相关文章

  • React虚拟dom中的key值

    1.虚拟dom中key的作用:(1)简单的说,key是虚拟dom对象的标识,在更新显示时key起着及其重要的作用;...

  • React diff算法

    react/vue中,key的作用是什么? 为什么遍历时,key最好不要用index? 虚拟DOM中key的作用:...

  • ReactNative性能优化相关

    1,Component Key 如果component用了random key,那么react会在做虚拟dom比较...

  • React中的domDiffing算法

    1.react/vue中的key有什么作用?(key的内部原理是什么) (1)简单地说:key是虚拟DOM对象的标...

  • vue 2022经典面试题汇总

    1、虚拟DOM中key的作用: 2、key的对比规则: 若虚拟DOM中内容没变,直接使用之前的真实DOM 若虚拟D...

  • react key的问题

    key的作用 问题:key值用id还是index react会同过key的值来更新dom对象,达到最小化渲染页面,...

  • React之JSX

    什么是JSX React的核心机制之一就是虚拟DOM:可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来...

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

    react/vue 项目为什么要在列表加key,作用是什么? key 主要用在 Vue 的虚拟 DOM 算法,在新...

  • 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 Re...

  • React native 常用组件之View

    一、 JSX和组件的概念React的核心机制就是虚拟DOM,可以在内存中创建的虚拟DOM元素,React利用虚拟D...

网友评论

      本文标题:React虚拟dom中的key值

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