React 等框架使用 index 做 key 的问题
2018-10-20 01:12
453 查看
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 这种靠谱。
相关文章推荐
- 关于在struts 框架中使用Filter过滤器解决汉字编码问题
- 关于在struts 框架中使用Filter过滤器解决汉字编码问题
- Struts2使用validator验证框架的问题
- 2009-03-25技术学习:使用Wicket框架时遇到的问题
- WAS下使用OJDBC14.JAR的JAVA.LANG.ARRAYINDEXOUTOFBOUNDSEXCEPTION问题
- ASP.NET MV框架下使用ajax上传要注意的一个问题
- 框架使用过程中遇到的几个问题
- struts1 验证框架使用时应注意的问题
- lucene问题_Lucene删除文档,使用IndexReader还是IndexWriter?
- ssh 框架 + springsecurity 下使用 struts2 fileupload 的冲突问题
- TP中的URL问题 index.php?action/method/key/value是如何实现的?
- oacle中关于bitmap index的使用问题
- 关于index_ffs使用索引的一点问题.
- 解决使用框架session过期后主页面中显示登陆页面问题
- 【转载】IE中Iframe跨站引用时,框架内程序不能使用cookies问题解决
- 初次使用YII框架时,安装过程中出现的问题
- 使用ajax的prototype框架时返回的responseText值的问题
- Struts2.1.8 验证框架(validation)的使用中遇到的一些问题(直接访问jsp遇到的错误)
- 在使用hashmap时遇到不同key也会覆盖的问题
- 初识ExtJS---之使用Extjs框架引用的路径问题