挑戰 React 第二十篇

上一篇提到，若要渲染清單少了 key 會出現以下截圖提示訊息。

加入 unique key，即可解決上面截圖的問題。

const pharmacyList = pharmacies.map((pharmacy) => (
      // 加上 key 提示訊息就會消失
      <div key={pharmacy.id}>
        <h2> 地點: {pharmacy.name} </h2>
        <Mask mask={pharmacy.mask}/>
      </div>  
    ));
    return (
      <div>
        {pharmacyList}
      </div>
    )
  }

若真的沒有 unique key，官方有提供 index 作為唯一值。

 const pharmacyList =
 // 加入 index
 pharmacies.map((pharmacy, index) => (
      <div key={index}>
        <h2> 地點: {pharmacy.name} </h2>
        <Mask mask={pharmacy.mask}/>
      </div>  
    ));
    return (
      <div>
        {pharmacyList}
      </div>
    )

官方文檔解釋 key

Key 幫助 React 分辨哪些項目被改變、增加或刪除。在 array 裡面的每個 element 都應該要有一個 key，如此才能給予每個 element 一個固定的身份。

為何需要 key

React 在渲染 Virtual Dom，使用 Diffing 的演算法來減少有動到的 DOM。

• 設置了key會對相同key的元素比較
• 若沒有設置key則按節點順序進行比較

舉例 1: 沒有設置 key

# 原本清單有兩筆
<ul>
  <li>Mary</li>
  <li>John</li>
</ul>

# 從資料庫取出來的清單為 3 筆，Tom 出現在最下面
<ul>
  <li>Mary</li>
  <li>John</li>
  <li>Tom</li>
</ul>

React 只會異動到 <li>Tom</li>，因為上面兩個 li 資料一樣因此所以不會異動。

舉例 2: 沒有設置 key

# 原本清單有兩筆
<ul>
  <li>Mary</li>
  <li>John</li>
</ul>

# 從資料庫取出來的清單為 3 筆，Tom 出現在最上面
<ul>
  <li>Tom</li>
  <li>Mary</li>
  <li>John</li>
</ul>

React 會識別整理清單都不一樣，所以重新渲染整張表單。

若增加 key，會先去看 key 有沒有異動到，以舉例2做修改為以下:

# 原本清單有兩筆，但有增加 key
<ul>
  <li key="1">Mary</li>
  <li key="2">John</li>
</ul>

# 從資料庫取出來的清單為 3 筆，Tom 出現在最上面
<ul>
  <li key="3">Tom</li>
  <li key="1">Mary</li>
  <li key="2">John</li>
</ul>

React 會識別 key 的 1 跟 2 都存在，所以只要新增 key="3" 的 DOM

上述了解了react會先去看key有沒有異動再看要不要異動，但這也產生另外一個問題，若用預設官方提供的 index，且項目的順序會改變的話，有可能造成渲染出來的 UI 出現非預期效果，所以建議非不得已在使用 index。

結論

1. 清單列表要 + unique key 加速效能
2. 若沒有 unique key 可用官方給的 index
3. 若使用官方 index，則項目順序則不能改變否則會有非預期效果