react 对循环warning提示增加key

在学习react遇到这个问题,页面可以正常工作,但控制台一直出现这个警告,看着很不爽,然后研究怎么解决

代码片段:


出现:Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method

在浏览器中打开后,点击“add #7”按钮会出现上面的警告,原因是数组循环时缺少unique "key" prop,意思就是要有一个不会重复的关键参数key。

2.warning02/todo.html

那么,关键参数重复了会怎样呢?

代码片段:


在浏览器中打开后,点击“add #7”按钮增加重复的对象,会出现:

Warning: flattenChildren(...): Encountered two children with the same key,.$1. Child keys must be unique; when two children share a key, only the first child will be used.

而且,添加不了重复的对象,不同的对象是可以添加的。

warning/todo.html

由此,我们可以从表面上理解:在页面可以正常工作的前提下,这个key要么设置为会重复的关键参数,要么不设置。不设置,控制台会出警告,但不影响页面正常工作。完美的解决方法:就是消除警告,页面还可以正常工作。

改写TodoList ,增加key,reactid从0开始递增,前缀:li_,由此产生不重复的key值。

代码片段:


在浏览器中打开后,没有警告,页面可以正常工作。

有位网友在http://pandakeeper.net:8000/?p=254 中是这么说的:

react的key关乎到react的dom-diff算法 react中对于dom的操作是根据生成的data-reactid进行绑定的,添加key可以保证dom结构的完整性,而不会根据react自己对dom标记的key进行重新分配 react每次决定重新渲染的时候,几乎完全是根据data-reactid来决定的,最重要的是这个机制

dom-diff是指: 所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上。它可以极大提高网页的性能表现。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,577评论 1 11
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,295评论 0 2
  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 5,987评论 0 21
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,464评论 1 10