如果你觉得自己的水平还是不够，那么可能是你遇到的 bug 还不够多！
又遇到了新 bug
- 代码结构
<tbody>
{
user_info.map((v, k) => {
return <UserInfoItems user_name={v.user_name} name={v.name} age={v.age} sex={v.sex}
phone={v.phone} email={v.email} comments={v.comments}/>
})
}
</tbody>
- bug 提示
warning.js:35 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
App. See https://fb.me/react-warning-keys for more information
面带微笑的解决掉它
- bug 的中文解释
在数组或者迭代器中的每一个子节点应当有一个唯一的key属性；
- bug分析
这是 react 在遇到列表但又找不到 key 时的警告，当然无视它时，大部分页面也会正常工作，但这意味着你的代码存在着潜在的性能问题，react没有办法高效的更新这个列表。
- 解决方法
对于列表节点提供唯一的key属性可以帮助React定位到正确的节点进行比较，从而大幅减少DOM操作次数，提高性能.
<tbody>
{
user_info.map((v, k) => {
return <UserInfoItems key={k} user_name={v.user_name} name={v.name} age={v.age} sex={v.sex}
phone={v.phone} email={v.email} comments={v.comments}/>
})
}
</tbody>
相关知识学习
- 列表节点的操作通常包括添加、删除和排序.而在React中，我们只会告诉React新的界面应该是A-B-F-C-D-E，由Diff算法完成更新界面。如图 pic1
pic.png
- 如果每个节点都没有唯一的标识，react 无法识别每一个节点，那么更新的效率就会很低，即将 C 更新成 F，将 D 更新为 C， 将 E 更新为 D，最后再插入一个 E 节点。
- React会逐个对节点进行更新，转换到目标节点。而最后插入新的节点E，涉及到的DOM操作非常多.如图 pic2
pic2
如果给每个节点唯一的标识（key），那么React能够找到正确的位置去插入新的节点，如图 pic3
pic3
又学到了小知识，加油啦！！
