如果你覺得自己的水平還是不夠素征，那么可能是你遇到的 bug 還不夠多！
又遇到了新 bug
- 代碼結(jié)構(gòu)
<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 的中文解釋
在數(shù)組或者迭代器中的每一個子節(jié)點應(yīng)當有一個唯一的key屬性跷坝；
- bug分析
這是 react 在遇到列表但又找不到 key 時的警告涣仿，當然無視它時，大部分頁面也會正常工作塘装，但這意味著你的代碼存在著潛在的性能問題蛇摸，react沒有辦法高效的更新這個列表备图。
- 解決方法
對于列表節(jié)點提供唯一的key屬性可以幫助React定位到正確的節(jié)點進行比較，從而大幅減少DOM操作次數(shù)赶袄，提高性能.
<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>
相關(guān)知識學(xué)習(xí)
- 列表節(jié)點的操作通常包括添加揽涮、刪除和排序.而在React中，我們只會告訴React新的界面應(yīng)該是A-B-F-C-D-E饿肺，由Diff算法完成更新界面蒋困。如圖 pic1
pic.png
- 如果每個節(jié)點都沒有唯一的標識，react 無法識別每一個節(jié)點敬辣，那么更新的效率就會很低雪标，即將 C 更新成 F零院，將 D 更新為 C， 將 E 更新為 D村刨，最后再插入一個 E 節(jié)點告抄。
- React會逐個對節(jié)點進行更新，轉(zhuǎn)換到目標節(jié)點嵌牺。而最后插入新的節(jié)點E打洼，涉及到的DOM操作非常多.如圖 pic2
pic2
如果給每個節(jié)點唯一的標識（key），那么React能夠找到正確的位置去插入新的節(jié)點逆粹，如圖 pic3
pic3
又學(xué)到了小知識募疮，加油啦！僻弹！
