列表节点比较——react

如果你觉得自己的水平还是不够，那么可能是你遇到的 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

又学到了小知识，加油啦！！