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