微信小程序利用key實現列表性能的提升

key值在列表渲染的時候，能夠提升列表渲染性能，為什么呢？首先得想想小程序的頁面是如何渲染的，主要分為以下幾步：

• 將wxml結構的文檔構建成一個vdom虛擬數
• 頁面有新的交互，產生新的vdom數，然后與舊數進行比較，看哪里有變化了，做對應的修改（刪除、移動、更新值）等操作（對比vue、react）
• 最后再將vdom渲染成真實的頁面結構

key值的作用就在第二步，當數據改變觸發渲染層重新渲染的時候，會校正帶有 key
的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。key值如果不指明，默認會按數組的索引來處理，因而會導致一些類似input等輸入框組件的值出現混亂的問題。

• 不加key，在數組末尾追加元素，之前已渲染的元素不會重新渲染。但如果是在頭部或者中間插入元素，整個list被刪除重新渲染，且input組件的值還出現了混亂，值沒有正常被更新
• 添加key，在數組末尾、中間、或者頭部插入元素，其它已存在的元素都不會被重新渲染，值也能正常被更新

因而，在做list渲染時，如果list的順序發生變化時，最好增加key，且不要簡單的使用數組索引當做key，需要用唯一值當成key。