在学习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上。它可以极大提高网页的性能表现。