React（四）： key的做用

一、key的使用場景

render() {
    console.log(this.state);
    return (
        <div>
        <h3>用戶列表</h3>
          {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
       </div>
    );
  }複製代碼

在項目開發中，key屬性的使用場景最多的是由數組動態建立的子組件的狀況，須要爲每一個子組件添加惟一的key屬性值。可參考實例demo，不設置key的話會出現下面這樣的warning。

"Warning: Each child in an array or iterator should have a unique 'key' prop.%s%s See https://fb.me/react-warning-keys for more information.%s" "複製代碼

二、key的做用

有了key屬性後，就能夠與組件創建了一種對應關係，react根據key來決定是銷燬從新建立組件仍是更新組件。

• key相同，若組件屬性有所變化，則react只更新組件對應的屬性；沒有變化則不更新。
• key值不一樣，則react先銷燬該組件(有狀態組件的componentWillUnmount會執行)，而後從新建立該組件（有狀態組件的constructor和componentWillUnmount都會執行）

注意：

• key值必定要和具體的元素一一對應到。
  
• key屬性是添加到自定義的子組件上，而不是子組件內部的頂層的組件上。
  
• 儘可能不要用數組的index去做爲key。
  
• 永遠不要試圖在render的時候用隨機數或者其餘操做給元素加上不穩定的key，這樣形成的性能開銷比不加key的狀況下更糟糕。
  

https://www.tuicool.com/articles/UVvaMz