真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

{this.state.data.map((v,idx)=>)}

//Item組件render方法
render(){
  return 
{this.props.v} 
}

//this.state.users內(nèi)容
this.state = {
 users: [{id:1,name: '張三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
 

  
用戶列表
  {this.state.users.map(u => {u.id}:{u.name}
)}
 

// 轉(zhuǎn)換前
const element = (
 

  
用戶列表
  {[1:張三
, 2:李四

有babel轉(zhuǎn)換后React.createElement中的代碼可以看出，其它元素之所以不是必須需要key是因?yàn)椴还芙M件的state或者props如何變化，這些元素始終占據(jù)著React.createElement固定的位置，這個(gè)位置就是天然的key。

而由數(shù)組創(chuàng)建的組件可能由于動(dòng)態(tài)的操作導(dǎo)致重新渲染時(shí)，子組件的位置發(fā)生了變化，例如上面用戶列表子組件新增一個(gè)用戶，上面兩個(gè)用戶的位置可能變化為下面這樣：

var element = React.createElement(
 "div",
 null,
 React.createElement("h4",null,"用戶列表"),
 [
  React.createElement("div",{ key: 3 },"1:王五"), 
  React.createElement("div",{ key: 1 },"2:張三"), 
  React.createElement("div",{ key: 2 },"3:李四")
 ]
);

可以看出，數(shù)組創(chuàng)建子組件的位置并不固定，動(dòng)態(tài)改變的；這樣有了key屬性后，react就可以根據(jù)key值來(lái)判斷是否為同一組件。

另外，還有一種比較常見的場(chǎng)景：為一個(gè)有復(fù)雜繁瑣邏輯的組件添加key后，后續(xù)操作可以改變?cè)摻M件的key屬性值，從而達(dá)到先銷毀之前的組件，再重新創(chuàng)建該組件。

key的最佳實(shí)踐

上面說到了，由數(shù)組創(chuàng)建的子組件必須有key屬性，否則的話你可能見到下面這樣的warning：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ServiceInfo`. See https://fb.me/react-warning-keys for more information.

可能你會(huì)發(fā)現(xiàn)，這只是warning而不是error，它不是強(qiáng)制性的，為什么react不強(qiáng)制要求用key而報(bào)error呢？其實(shí)是強(qiáng)制要求的，只不過react為按要求來(lái)默認(rèn)上幫我們做了，它是以數(shù)組的index作為key的。

index作為key是一種反模式

在list數(shù)組中，用key來(lái)標(biāo)識(shí)數(shù)組創(chuàng)建子組件時(shí)，若數(shù)組的內(nèi)容只是作為純展示，而不涉及到數(shù)組的動(dòng)態(tài)變更，其實(shí)是可以使用index作為key的。

但是，若涉及到數(shù)組的動(dòng)態(tài)變更，例如數(shù)組新增元素、刪除元素或者重新排序等，這時(shí)index作為key會(huì)導(dǎo)致展示錯(cuò)誤的數(shù)據(jù)。本文開始引入的例子就是最好的證明。

{this.state.data.map((v,idx)=>)}
// 開始時(shí)：['a','b','c']=>

  a 
  b 
  c 


// 數(shù)組重排 -> ['c','b','a'] =>

  c 
  b 
  a 

上面實(shí)例中在數(shù)組重新排序后，key對(duì)應(yīng)的實(shí)例都沒有銷毀，而是重新更新。具體更新過程我們拿key=0的元素來(lái)說明， 數(shù)組重新排序后：

• 組件重新render得到新的虛擬dom；

• 新老兩個(gè)虛擬dom進(jìn)行diff，新老版的都有key=0的組件，react認(rèn)為同一個(gè)組件，則只可能更新組件；

• 然后比較其children，發(fā)現(xiàn)內(nèi)容的文本內(nèi)容不同（由a--->c)，而input組件并沒有變化，這時(shí)觸發(fā)組件的componentWillReceiveProps方法，從而更新其子組件文本內(nèi)容;

• 因?yàn)榻M件的children中input組件沒有變化，其又與父組件傳入的任props沒有關(guān)聯(lián)，所以input組件不會(huì)更新(即其componentWillReceiveProps方法不會(huì)被執(zhí)行)，導(dǎo)致用戶輸入的值不會(huì)變化。

這就是index作為key存在的問題，所以不要使用index作為key。

key的值要穩(wěn)定唯一

在數(shù)組中生成的每項(xiàng)都要有key屬性，并且key的值是一個(gè)永久且唯一的值，即穩(wěn)定唯一。

在理想情況下，在循環(huán)一個(gè)對(duì)象數(shù)組時(shí)，數(shù)組的每一項(xiàng)都會(huì)有用于區(qū)分其他項(xiàng)的一個(gè)鍵值，相當(dāng)數(shù)據(jù)庫(kù)中主鍵。這樣就可以用該屬性值作為key值。但是一般情況下可能是沒有這個(gè)屬性值的，這時(shí)就需要我們自己保證。

但是，需要指出的一點(diǎn)是，我們?cè)诒ＷC數(shù)組每項(xiàng)的唯一的標(biāo)識(shí)時(shí)，還需要保證其值的穩(wěn)定性，不能經(jīng)常改變。例如下面代碼：

{
  this.state.data.map(el=>)
}

上面代碼中中MyComponent的key值是用Math.random隨機(jī)生成的，雖然能夠保持其唯一性，但是它的值是隨機(jī)而不是穩(wěn)定的，在數(shù)組動(dòng)態(tài)改變時(shí)會(huì)導(dǎo)致數(shù)組元素中的每項(xiàng)都重新銷毀然后重新創(chuàng)建，有一定的性能開銷；另外可能導(dǎo)致一些意想不到的問題出現(xiàn)。所以：

key的值要保持穩(wěn)定且唯一，不能使用random來(lái)生成key的值。

所以，在不能使用random隨機(jī)生成key時(shí)，我們可以像下面這樣用一個(gè)全局的localCounter變量來(lái)添加穩(wěn)定唯一的key值。

var localCounter = 1;
this.data.forEach(el=>{
  el.id = localCounter++;
});
//向數(shù)組中動(dòng)態(tài)添加元素時(shí)，
function createUser(user) {
  return {
    ...user,
    id: localCounter++
  }
}

key其它注意事項(xiàng)

當(dāng)然除了為數(shù)據(jù)元素生成的組件要添加key，且key要穩(wěn)定且唯一之外，還需要注意以下幾點(diǎn)：

key屬性是添加到自定義的子組件上，而不是子組件內(nèi)部的頂層的組件上。

//MyComponent
...
render() {//error
  {{item.name}}
}
...

//right

key值的唯一是有范圍的，即在數(shù)組生成的同級(jí)同類型的組件上要保持唯一，而不是所有組件的key都要保持唯一

不僅僅在數(shù)組生成組件上，其他地方也可以使用key，主要是react利用key來(lái)區(qū)分組件的，相同的key表示同一個(gè)組件，react不會(huì)重新銷毀創(chuàng)建組件實(shí)例，只可能更新；key不同，react會(huì)銷毀已有的組件實(shí)例，重新創(chuàng)建組件新的實(shí)例。

{
 this.state.type ? 
  

  : 

}

例如上面代碼中，this.state.type的值改變時(shí)，原Son_1和Son2組件的實(shí)例都將會(huì)被銷毀，并重新創(chuàng)建Son_1和Son_2組件新的實(shí)例，不能繼承原來(lái)的狀態(tài)，其實(shí)他們只是互換了位置。為了避免這種問題，我們可以給組件加上key。

{
 this.state.type ? 
  

  : 

}

這樣，this.state.type的值改變時(shí)，Son_1和Son2組件的實(shí)例沒有重新創(chuàng)建，react只是將他們互換位置。

感謝各位的閱讀！關(guān)于“React中key怎么使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。