Skip to main content

[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。

Last updated on