挑战 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。

结论

清单列表要 + unique key 加速效能若没有 unique key 可用官方给的 index若使用官方 index，则项目顺序则不能改变否则会有非预期效果