react中key的正確使用方式

Wildcard 發布于2019-08-23 13:43 / 2445人閱讀

摘要：使用第一頁張三李四王五第二頁張三三李四四王五五翻頁后，不變，子組件值發生改變，組件并不會被卸載，只發生更新。不推薦使用或者其他的第三方庫來生成唯一值作為。

在開發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 (
      
        值：{this.props.value}
        
      
    );
  }
}

父組件

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

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

然后在頭部添加一個元素：

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

變化后：

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

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

當使用唯一id作為key后：

變化后：

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

3.正確的選擇key 3.1 純展示

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

3.2 推薦使用index的情況

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

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

使用唯一id：

第一頁

    張三
    李四
    王五

第二頁

    張三三
    李四四
    王五五

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

使用index：

第一頁

    張三
    李四
    王五

第二頁

    張三三
    李四四
    王五五

翻頁后，key不變，子組件值發生改變，組件并不會被卸載，只發生更新。

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

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

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

不推薦使用math.random或者其他的第三方庫來生成唯一值作為key。

因為當數據變更后，相同的數據的key也有可能會發生變化，從而重新渲染，引起不必要的性能浪費。

如果數據源不滿足我們這樣的需求，我們可以在渲染之前為數據源手動添加唯一id，而不是在渲染時添加。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99438.html

React

摘要：語法是一種語法的拓展語言，在中官方也推薦使用描述用戶界面，使用起來會比較快捷而且易讀不是一門新的語言，可以理解為是一種語法糖，作用就是能夠讓我們更加直觀的在中創建標簽，最終還是會被編譯為語法，例如我們看一段代碼上面的語法最終會被編譯為語法， Reatc JSX語法 jsx是一種JavaScript語法的拓展語言，在React中官方也推薦使用jsx描述用戶界面，使用起來會比較快捷而且易讀...

techstay 2019-08-23 11:40 評論0 收藏0
【譯】React應用性能優化

摘要：應用主要的的性能瓶頸來自于一些冗余的程序處理以及組件中的的過程。為了避免這種情況，在你的應用中盡可能多的讓返回。使用工具將幫助你找到應用程序中特定的性能問題。這個工具跟用起來很像，但是它是專門用來檢測應用性能的。這段時間對自己寫的React應用的性能做了一些分析以及優化，發現項目中產生性能問題的原因主要來自兩個方面：大量的數據渲染使組件進行不必要的diff過程，導致應用卡頓；部...

txgcwm 2019-08-20 14:19 評論0 收藏0
React中元素與組件的區別

摘要：組件中有三種構建組件的方式。元素與組件的區別組件是由元素構成的。元素數據結構是普通對象，而組件數據結構是類或純函數。使用才是操作元素的正確姿勢。使用元素可以讓用戶傳入自定義組件的同時，為組件添加屬性。在初學 React 的時候，分不清 React 組件和 React 元素，著實踩了一些坑。搞清楚 React 中什么是組件，什么是元素，既可以理清楚概念，也可以讓你避免一些不必要的錯誤。...

lifesimple 2019-08-20 14:49 評論0 收藏0
ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（上）

摘要：起因某天，某測試說這個頁面在下白屏，也白。。某前端開發吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說又白了。。某前端開發吭哧吭哧。。。誰用的，出來我保證削不屎你。原諒我不禁又黑了一把。起因某天，某測試說：這個頁面在 IE8 下白屏，9也白。。某前端開發: 吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說：IE 又白了。。某前端開發: 吭哧吭哧。。。誰...

you_De 2019-08-20 11:06 評論0 收藏0
寫 React / Vue 項目時為什么要在列表組件中寫 key，其作用是什么

摘要：當正在更新使用渲染的元素列表時，它默認使用就地更新的策略。如果數據項的順序被改變，將不會移動。避免對節點就地復用需要修改的節點位置沒有改變，是內容更新了，這雖然提高了復用性能，但是往往在復雜的表單會導致狀態出現錯位。當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用就地更新的策略。如果數據項的順序被改變，Vue 將不會移動 DOM。元素來匹配數據項的順序，而是就地更...

eccozhou 2019-08-26 10:19 評論0 收藏0