React 等框架使用 index 做 key 的问题
假如有两个树,一个是之前,一个是更变之后,我们抽象成两种可能性。
- 插入内容在最后
- 插入内容在最前
关于插在中间,原理一样,就不阐述。
使用 ul 代表树,并且使用了 index 做 key:
<ul><li key="{0}">00000</li><li key="{1}">11111</li>
</ul>
先说原理
diff 树的时候,是一句一句往下的,所以是:ul -> li -> li -> ... 这样的过程,注意是对比。
插在最后
则变成这样:
<ul><li key="{0}">00000</li><li key="{1}">11111</li><li key="{2}">22222</li>
</ul>
对比原来的,是这样的场景:
- ul 一样,不用重新搞
- li 的 key 是 0,一样,不用重新搞
- li 的 key 是 1,一样,不用重新搞
- 恩,多了一个 li,key 是 2,加上去
简单理解来说,可以当做做了一步。
插在最前面
则应该变成这样:
<ul><li key="{0}">22222</li><li key="{1}">00000</li><li key="{2}">11111</li>
</ul>
对比原来的,是这样的场景:
- ul 一样,不用重新搞
- li 的 key 是 0,一样,不用重新搞
- li 的 key 是 1,一样,不用重新搞
- 恩,多了一个 li,key 是 2,加上去
最后就可能出现这样的结果:
<ul><li key="{0}">00000</li><li key="{1}">11111</li><li key="{2}">11111</li>
</ul>
差不多就这个意思,所以还是使用独立标记,比如:id 这种靠谱。
更多专业前端知识,请上 【猿2048】www.mk2048.com