一、key的作用
1. 虛擬DOM中key的作用：
1). 簡單的說: key是虛擬DOM對象的標識, 在更新顯示時key起着極其重要的作用。
2). 詳細的說: 當狀態中的數據發生變化時，react會根據【新數據】生成【新的虛擬DOM】,
隨後React進行【新虛擬DOM】與【舊虛擬DOM】的diff比較，比較規則如下：
a. 舊虛擬DOM中找到了與新虛擬DOM相同的key：
(1).若虛擬DOM中內容沒變, 直接使用之前的真實DOM
(2).若虛擬DOM中內容變了, 則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM
b. 舊虛擬DOM中未找到與新虛擬DOM相同的key
根據數據創建新的真實DOM，隨後渲染到到頁面
2. 用index作爲key可能會引發的問題：
1). 若對數據進行：逆序添加、逆序刪除等破壞順序操作:
會產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。
2). 如果結構中還包含輸入類的DOM：
會產生錯誤DOM更新 ==> 界面有問題。
3).注意！如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，
僅用於渲染列表用於展示，使用index作爲key是沒有問題的。
3. 開發中如何選擇key
1.最好使用每條數據的唯一標識作爲key, 比如id、手機號、身份證號、學號等唯一值。
2.如果確定只是簡單的展示數據，用index也是可以的。
二、Diffing 算法
React 執行 Render() 函數時，會生成一次虛擬 DOM，當組件再次更新時，會再生成一顆新的樹，然後 React 會對比兩棵樹的異同，執行更新算法。React 通過如下方法比較 DOM 的異同，其複雜度爲 O(n)：
- 兩個不同類型的元素會產生出不同的樹
- 開發者可以通過 key prop 來暗示哪些子元素在不同的渲染下能保持穩定
1. 比對不同類型的元素
當根節點爲不同類型的元素時，React 會拆卸原有的樹並且建立起新的樹。舉個例子，當一個元素從 <a> 變成 <img> 或者 DOM 節點被銷燬，都會觸發一個完整的重建流程。
2. 比對同一類型的元素
當比對兩個相同類型的 React 元素時，React 會保留 DOM 節點，僅比對及更新有改變的屬性。
