React、vue中的key有什么作用?

React、vue中的key有什么作用?

key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点。
当我们在使用v-for时,需要给单元加上key

如果不用key,Vue会采用就地复地原则:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。

如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed

1. 虚拟DOM中的key的作用

key是虚拟DOM对象,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟DOM,随后vue进行新的虚拟DOM旧虚拟DOM的差异比较。

2. 对比规则

2.1 旧虚拟DOM中找到了与新虚拟DOM相同的key

  • 若虚拟DOM中内容没变,直接使用之前的真实DOM(复用)。
  • 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换页面中的之前的真实DOM。

2.2 旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM,随后渲染到页面上。

3. 用index作为key可能会引发的问题

若对数据进行逆序添加、逆序删除等破坏顺序的操作,会产生没有必要的真实DOM更新,虽页面效果没有任何问题,但是效率低。
如果结构中还包含输入类的DOM,会产生错误的DOM更新,从而导致页面有问题。

4. 开发中如何选择key?

最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一值。
如果不存在对数据进行逆序添加、逆序删除等破环顺序操作,仅仅用于渲染列表,那么使用index作为key是没有问题的。
注意:如果没有写key,默认是index

猜你喜欢

转载自blog.csdn.net/weixin_51938823/article/details/132029991