react中key的作用是什么

本文小編為大家詳細介紹“react中key的作用是什么”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“react中key的作用是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react的key有什么用

作用

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

在react的diff算法中react會借助元素的key來判斷該元素是最新創(chuàng)建的還是被移動而來的，從而減少不必要的元素渲染。除此之外，react還要根據(jù)key來判斷元素與本地狀態(tài)的關聯(lián)關系

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

vue和react本身都是采用diff的算法vue采用的是更為細粒的更新組件方式，即是給每一個屬性綁定監(jiān)聽，

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

key是什么

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

如果列表數(shù)據(jù)渲染中，在數(shù)據(jù)后面插入一條數(shù)據(jù)，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算法中，前面的元素由于是完全相同的，并不會產(chǎn)生刪除創(chuàng)建操作，在最后一個比較的時候，則需要插入到新的DOM樹中

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

下面再來看看在前面插入數(shù)據(jù)時，使用key與不使用key的區(qū)別：

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

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

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

同樣，并不是擁有key值代表性能越高，如果說只是文本內(nèi)容改變了，不寫key反而性能和效率更高

主要是因為不寫key是將所有的文本內(nèi)容替換一下，節(jié)點不會發(fā)生變化

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

總結

良好使用key屬性是性能優(yōu)化的非常關鍵的一步，注意事項為：

key 應該是唯一的

key不要使用隨機值（隨機數(shù)在下一次 render 時，會重新生成一個數(shù)字）

避免使用 index 作為 key

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

讀到這里，這篇“react中key的作用是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道。