資訊專欄INFORMATION COLUMN
摘要：使用第一頁(yè)張三李四王五第二頁(yè)張三三李四四王五五翻頁(yè)后，不變，子組件值發(fā)生改變，組件并不會(huì)被卸載，只發(fā)生更新。不推薦使用或者其他的第三方庫(kù)來(lái)生成唯一值作為。
在開(kāi)發(fā)react程序時(shí)我們經(jīng)常會(huì)遇到這樣的警告，然后就會(huì)想到：哦！循環(huán)子組件忘記加key了～
出于方便，有時(shí)候會(huì)不假思索的使用循環(huán)的索引作為key，但是這樣真的好嗎？什么樣的值才是key的最佳選擇？
為了弄明白，本文將從三個(gè)方面來(lái)分析"key"：
1.為什么要使用key
2.使用index做key存在的問(wèn)題
3.正確的選擇key
1.為什么要使用keyreact官方文檔是這樣描述key的：
Keys可以在DOM中的某些元素被增加或刪除的時(shí)候幫助React識(shí)別哪些元素發(fā)生了變化。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)。
react的diff算法是把key當(dāng)成唯一id然后比對(duì)組件的value來(lái)確定是否需要更新的，所以如果沒(méi)有key，react將不會(huì)知道該如何更新組件。
你不傳key也能用是因?yàn)閞eact檢測(cè)到子組件沒(méi)有key后，會(huì)默認(rèn)將數(shù)組的索引作為key。
react根據(jù)key來(lái)決定是銷毀重新創(chuàng)建組件還是更新組件，原則是：
key相同，組件有所變化，react會(huì)只更新組件對(duì)應(yīng)變化的屬性。
key不同，組件會(huì)銷毀之前的組件，將整個(gè)組件重新渲染。
2.使用index做key存在的問(wèn)題 2.1 受控組件單純的展示組件比如span，這些組件是受控組件，意味著他們的值將是我們給定好的。
如果子組件只是受控組件，使用index作為key，可能表面上不會(huì)有什么問(wèn)題，實(shí)際上性能會(huì)受很大的影響。例如下面的代碼：
// ["張三","李四","王五"]=>
當(dāng)元素?cái)?shù)據(jù)源的順序發(fā)生改變時(shí)，對(duì)應(yīng)的：
key為0，1，2的組件都發(fā)生了變化，三個(gè)子組件都會(huì)被重新渲染。（這里的重新渲染不是銷毀，因?yàn)閗ey還在）
相反，我們使用唯一id作為key：
// ["張三","李四","王五"]=>
根據(jù)上面的更新原則，子組件的值和key均未發(fā)生變化，只是順序發(fā)生改變，因此react只是將他們做了移動(dòng)，并未重新渲染。
2.2 非受控組件像input這樣可以由用戶任意改變值，不受我們控制的組件，在使用了index作為key時(shí)可能會(huì)發(fā)生問(wèn)題，看如下的栗子：
子組件：
render() {
return (
值：{this.props.value}
);
}
}
父組件
{
this.state.data.map((element, index) => {
return
我們?cè)谇皟蓚€(gè)輸入框分別輸入對(duì)應(yīng)的值：
然后在頭部添加一個(gè)元素：
很明顯，這個(gè)結(jié)果并不符合我們的預(yù)期，我們來(lái)分析一下發(fā)生了什么：
值：0
值：1
值：2
變化后：
值：5
值：0
值：1
值：2
可以發(fā)現(xiàn)：key 0，1，2并沒(méi)有發(fā)生改變，根據(jù)規(guī)則，不會(huì)卸載組件，只會(huì)更新改變的屬性。
react只diff到了p標(biāo)簽內(nèi)值的變化，而input框中的值并未發(fā)生改變，因此不會(huì)重新渲染，只更新的p標(biāo)簽的值。
當(dāng)使用唯一id作為key后：
值：0
值：1
值：2
變化后：
值：5
值：0
值：1
值：2
可以很明顯的發(fā)現(xiàn)：key為 111，222，333的組件沒(méi)有發(fā)生任何改變，react不會(huì)更新他們，只是新插入了子組件555，并改變了其他組件的位置。
3.正確的選擇key 3.1 純展示如果組件單純的用于展示，不會(huì)發(fā)生其他變更，那么使用index或者其他任何不相同的值作為key是沒(méi)有任何問(wèn)題的，因?yàn)椴粫?huì)發(fā)生diff，就不會(huì)用到key。
3.2 推薦使用index的情況并不是任何情況使用index作為key會(huì)有缺陷，比如如下情況：
你要分頁(yè)渲染一個(gè)列表，每次點(diǎn)擊翻頁(yè)會(huì)重新渲染：
使用唯一id：
第一頁(yè)
翻頁(yè)后，三條記錄的key和組件都發(fā)生了改變，因此三個(gè)子組件都會(huì)被卸載然后重新渲染。
使用index：
第一頁(yè)
翻頁(yè)后，key不變，子組件值發(fā)生改變，組件并不會(huì)被卸載，只發(fā)生更新。
3.3 子組件可能發(fā)生變更/使用了非受控組件大多數(shù)情況下，使用唯一id作為子組件的key是不會(huì)有任何問(wèn)題的。
這個(gè)id一定要是唯一，并且穩(wěn)定的，意思是這條記錄對(duì)應(yīng)的id一定是獨(dú)一無(wú)二的，并且永遠(yuǎn)不會(huì)發(fā)生改變。
不推薦使用math.random或者其他的第三方庫(kù)來(lái)生成唯一值作為key。
因?yàn)楫?dāng)數(shù)據(jù)變更后，相同的數(shù)據(jù)的key也有可能會(huì)發(fā)生變化，從而重新渲染，引起不必要的性能浪費(fèi)。
如果數(shù)據(jù)源不滿足我們這樣的需求，我們可以在渲染之前為數(shù)據(jù)源手動(dòng)添加唯一id，而不是在渲染時(shí)添加。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99438.html
摘要：語(yǔ)法是一種語(yǔ)法的拓展語(yǔ)言，在中官方也推薦使用描述用戶界面，使用起來(lái)會(huì)比較快捷而且易讀不是一門(mén)新的語(yǔ)言，可以理解為是一種語(yǔ)法糖，作用就是能夠讓我們更加直觀的在中創(chuàng)建標(biāo)簽，最終還是會(huì)被編譯為語(yǔ)法，例如我們看一段代碼上面的語(yǔ)法最終會(huì)被編譯為語(yǔ)法， Reatc JSX語(yǔ)法 jsx是一種JavaScript語(yǔ)法的拓展語(yǔ)言，在React中官方也推薦使用jsx描述用戶界面，使用起來(lái)會(huì)比較快捷而且易讀...
摘要：應(yīng)用主要的的性能瓶頸來(lái)自于一些冗余的程序處理以及組件中的的過(guò)程。為了避免這種情況，在你的應(yīng)用中盡可能多的讓返回。使用工具將幫助你找到應(yīng)用程序中特定的性能問(wèn)題。這個(gè)工具跟用起來(lái)很像，但是它是專門(mén)用來(lái)檢測(cè)應(yīng)用性能的。 這段時(shí)間對(duì)自己寫(xiě)的React應(yīng)用的性能做了一些分析以及優(yōu)化，發(fā)現(xiàn)項(xiàng)目中產(chǎn)生性能問(wèn)題的原因主要來(lái)自兩個(gè)方面： 大量的數(shù)據(jù)渲染使組件進(jìn)行不必要的diff過(guò)程，導(dǎo)致應(yīng)用卡頓； 部...
摘要：組件中有三種構(gòu)建組件的方式。元素與組件的區(qū)別組件是由元素構(gòu)成的。元素?cái)?shù)據(jù)結(jié)構(gòu)是普通對(duì)象，而組件數(shù)據(jù)結(jié)構(gòu)是類或純函數(shù)。使用才是操作元素的正確姿勢(shì)。使用元素可以讓用戶傳入自定義組件的同時(shí)，為組件添加屬性。 在初學(xué) React 的時(shí)候，分不清 React 組件和 React 元素，著實(shí)踩了一些坑。搞清楚 React 中什么是組件，什么是元素，既可以理清楚概念，也可以讓你避免一些不必要的錯(cuò)誤。...
摘要：起因某天，某測(cè)試說(shuō)這個(gè)頁(yè)面在下白屏，也白。。某前端開(kāi)發(fā)吭哧吭哧。。。一上午的時(shí)間就過(guò)去了，搞定了。第二天，某測(cè)試說(shuō)又白了。。某前端開(kāi)發(fā)吭哧吭哧。。。誰(shuí)用的，出來(lái)我保證削不屎你。原諒我不禁又黑了一把。 起因 某天，某測(cè)試說(shuō)：這個(gè)頁(yè)面在 IE8 下白屏，9也白。。 某前端開(kāi)發(fā): 吭哧吭哧。。。一上午的時(shí)間就過(guò)去了，搞定了。 第二天，某測(cè)試說(shuō)：IE 又白了。。 某前端開(kāi)發(fā): 吭哧吭哧。。。誰(shuí)...
摘要：當(dāng)正在更新使用渲染的元素列表時(shí)，它默認(rèn)使用就地更新的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，將不會(huì)移動(dòng)。避免對(duì)節(jié)點(diǎn)就地復(fù)用需要修改的節(jié)點(diǎn)位置沒(méi)有改變，是內(nèi)容更新了，這雖然提高了復(fù)用性能，但是往往在復(fù)雜的表單會(huì)導(dǎo)致?tīng)顟B(tài)出現(xiàn)錯(cuò)位。 當(dāng) Vue 正在更新使用 v-for 渲染的元素列表時(shí)，它默認(rèn)使用就地更新的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM。 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是就地更...
閱讀 1585·2021-09-30 09:47
閱讀 3581·2021-09-22 15:05
閱讀 2829·2021-08-30 09:44
閱讀 3617·2019-08-30 15:55
閱讀 1365·2019-08-30 13:08
閱讀 1323·2019-08-29 16:40
閱讀 545·2019-08-29 12:45
閱讀 1380·2019-08-29 11:25
