react中key的具體使用方法介紹（程式碼範例）

本篇文章帶給大家的內容是關於react中key的具體使用方法介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在開發react程式時我們常常會遇到這樣的警告，然後就會想到：喔！循環子元件忘記加key了～

出於方便，有時候會不假思索的使用循環的索引作為key，但是這樣真的好嗎？什麼樣的值才是key的最佳選擇？

為了弄清楚，本文將從三個面向來分析"key"：

1.為什麼要使用key

2.使用index做key存在的問題

3.正確的選擇key

1.為什麼要使用key

react官方文件是這樣描述key的：

Keys可以在DOM中的某些元素被增加或刪除的時候幫助React識別哪些元素發生了變化。因此你應給數組中的每一個元素一個確定的標識。

react的diff演算法是把key當成唯一id然後比對元件的value來決定是否需要更新的，所以如果沒有key，react將不會知道該如何更新元件。

你不傳key也能用是因為react偵測到子元件沒有key後，會預設將陣列的索引當作key。

react根據key來決定要銷毀重新建立元件還是更新元件，原則是：

• key相同，元件有所變化，react只會更新元件對應變化的屬性。

• key不同，元件會銷毀先前的元件，並將整個元件重新渲染。

2.使用index做key存在的問題

#2.1 受控元件

單純的展示元件例如span，這些組件是受控組件，這意味著他們的值將是我們給定好的。

如果子元件只是受控元件，使用index作為key，可能表面上不會有什麼問題，實際上效能會受到很大的影響。例如下面的程式碼：

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

當元素資料來源的順序改變時，對應的：

key為0，1，2的元件都發生了變化，三個子元件都會被重新渲染。 （這裡的重新渲染不是銷毀，因為key還在）

相反，我們使用唯一id作為key：

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

根據上面的更新原則，子元件的值和key都未發生變化，只是順序發生改變，因此react只是將他們做了移動，並未重新渲染。

2.2 非受控元件

像input這樣可以由使用者任意改變值，不受我們控制的元件，在使用了index作為key時可能會發生問題，看如下的栗子：

子元件：

  render() {
    return (
      <p>
        </p><p>值：{this.props.value}</p>
        <input>
      
    );
  }
}

父元件

{
this.state.data.map((element, index) => {
    return <child></child>
    })
}

我們在前兩個輸入方塊分別輸入對應的值：

然後在頭部加入一個元素：

#很明顯，這個結果並不符合我們的預期，我們來分析一下發生了什麼：

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

變化後：

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

可以發現：key 0，1，2並沒有改變，根據規則，不會卸載元件，只會更新改變的屬性。

react只diff到了p標籤內值的變化，而input框中的值並未改變，因此不會重新渲染，只更新的p標籤的值。

當使用唯一id作為key後：

#

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

變更後：

    
值：5
    

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

可以很明顯的發現：key為111，222，333的組件沒有發生任何改變，react不會更新他們，只是新插入了子組件555，並改變了其他組件的位置。

3.正確的選擇key

3.1 純粹展示

如果元件單純的用於展示，不會發生其他變更，那麼使用index或其他任何不相同的值作為key是沒有任何問題的，因為不會發生diff，就不會用到key。

3.2 推薦使用index的情況

並不是任何情況使用index作為key會有缺陷，例如如下情況：

你要分頁渲染一個列表，每次點擊翻頁會重新渲染：

使用唯一id：

第一页
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
第二页
<ul>
    <li key="333">张三三</li>
    <li key="444">李四四</li>
    <li key="555">王五五</li>
</ul>

翻頁後，三筆記錄的key和元件都發生了改變，因此三個子元件都會被卸載然後重新渲染。

使用index：

第一页
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
第二页
<ul>
    <li key="0">张三三</li>
    <li key="1">李四四</li>
    <li key="2">王五五</li>
</ul>

翻頁後，key不變，子元件值改變，元件並不會被卸載，只發生更新。

3.3 子元件可能發生變更/使用了非受控元件

大多數情況下，使用唯一id作為子元件的key是不會有任何問題的。

這個id一定要是唯一，而且穩定的，意思是這條記錄對應的id一定是獨一無二的，而且永遠不會改變。

不建議使用math.random或其他的第三方函式庫來產生唯一值作為key。

因為當資料變更後，相同的資料的key也有可能會發生變化，從而重新渲染，造成不必要的效能浪費。

如果資料來源不滿足我們這樣的需求，我們可以在渲染之前為資料來源手動新增唯一id，而不是在渲染時新增。

以上是react中key的具體使用方法介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！