跳至主要内容

[note] React 自問自答

React 相關​

List 中的 Key 是做什麼用的​

Keys 主要是用來幫助 React 辨認清單中的哪個元素被改變、增加或移除了。

具體來說，假設在使用原生 JavaScript 的情況下，當我們試著從 <ul></ul>的最後新增 <li> 元素時，影響是最小的，例如：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>  <!-- append 新增這個元素 -->
</ul>

但若是想將元素添加在清單的最上方時，效能會最差，因為 React 會認為它們是完全不同的，而將其整個更新。像是：

<ul>
  <li>3</li>  <!-- append 新增這個元素 -->
  <li>1</li>
  <li>2</li>
</ul>

為了解決這樣的問題，React 使用 key 這個屬性來做清單元素的比對，React 將能透過 key 來知道哪個元素是新加入的，而不是去比對 DOM 元素本身。

recursing on children @ react > reconciliation

為什麼不建議使用陣列的 index 當作 Key？​

如果陣列的元素的順序是會改變的，就不要使用陣列的 index 當作 key，因為一旦順序改變導致 index 改變後，React 就沒辦法清楚知道它是不是同一個元素，這會嚴重的影響到效能，並可能產生 bug。