react的key有什麼用

react中key的作用是：在diff演算法中判斷元素是最新創建的還是被移動來的，從而減少不必要的diff，也就是為了提高diff同級比較的效率，避免原地復用帶來的副作用；key是react用來追蹤清單的元素被修改，被加或是被刪除的標識。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react的key有什麼用

作用

#跟Vue一樣，React 也存在diff演算法，而元素key屬性的作用是用於判斷元素是新創建的還是被移動的元素，從而減少不必要的Diff

在react的diff演算法中react會藉助元素的key來判斷該元素是最新創建的還是被移動而來的，從而減少不必要的元素渲染。除此之外，react還要根據key來判斷元素與本地狀態的關聯關係

簡單的來說就是為了提高diff的同級比較的效率，避免原地復用帶來的副作用，

vue和react本身都是採用diff的演算法vue採用的是更為細粒的更新元件方式，即是給每一個屬性綁定監聽，

react採用的是自頂而下的更新策略，每次小的改動都會產生一個全新的vdom，從而進行diff，如果不寫key，就會發生本來應該更新卻沒有更新

key是什麼

key是react用來追蹤哪些清單的元素被修改，被加入或是被刪除的輔助標示。在開發過程中我們需要保證某個元素的key在其同級元素中具有唯一性。

如果列表資料渲染中，在資料後面插入一條數據，key作用並不大，如下：

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

前面的元素在diff演算法中，前面的元素由於是完全相同的，並不會產生刪除創建操作，在最後一個比較的時候，則需要插入到新的DOM樹中

#因此，在這種情況下，元素有無key屬性意義並不大

下面再來看看在前面插入資料時，使用key與不使用key的區別：

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

當擁有key的時候，react根據key屬性匹配原有樹上的子元素以及最新樹上的子元素，像上述情況只需要將000元素插入到最前面位置

當沒有key的時候，所有的li標籤都需要進行修改

同樣，並不是擁有key值代表效能越高，如果說只是文字內容改變了，不寫key反而效能和效率更高

主要是因為不寫key是將所有的文字內容替換一下，節點不會改變

而寫key則涉及到了節點的增和刪，發現舊key不存在了，則將其刪除，新key在之前沒有，則插入，這就增加性能的開銷

總結

良好使用key屬性是效能最佳化的非常關鍵的一步，注意事項為：

key 應該是唯一的

key不要使用隨機值（隨機數下一次render 時，會重新產生一個數字）

避免使用index 作為key

react判斷key的流程具體如下圖：

推薦學習：《react影片教學》

以上是react的key有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！