iT邦幫忙

0

React 清單的 Key

挑戰 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,則項目順序則不能改變否則會有非預期效果

尚未有邦友留言

立即登入留言