日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
面試官：React中的Key有什么作用？

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

創(chuàng)新互聯(lián)專注于沈北新網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供沈北新營銷型網(wǎng)站建設(shè)，沈北新網(wǎng)站制作、沈北新網(wǎng)頁設(shè)計(jì)、沈北新網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造沈北新網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供沈北新網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

一、是什么

首先，給出react組件中進(jìn)行列表渲染的一個(gè)示例：

 
 
 
 
      
  
  
  
  1. const data = [ 
    2.   
  
  
  
  2.   { id: 0, name: 'abc' }, 
    3.   
  
  
  
  3.   { id: 1, name: 'def' }, 
    4.   
  
  
  
  4.   { id: 2, name: 'ghi' }, 
    5.   
  
  
  
  5.   { id: 3, name: 'jkl' } 
    6.   
  
  
  
  6. ]; 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. const ListItem = (props) => { 
    9.   
  
  
  
  9.   return 
  10. {props.name}
    11. ;   
  
  
  
  11. }; 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. const List = () => { 
    14.   
  
  
  
  14.   return ( 
    15.   
  
  
  
  15.     
         
  
  
  
    •       {data.map((item) => ( 
      •   
  
  
  
    •          
      •   
  
  
  
    •       ))} 
      •   
  
  
  
    •     
     
    16.   
  
  
  
  16.   ); 
    17.   
  
  
  
  17. }; 
    18.

然后在輸出就可以看到react所提示的警告信息：

 
 
 
 
      
  
  
  
  1. Each child in a list should have a unique "key" prop. 
    2.

根據(jù)意思就可以得到渲染列表的每一個(gè)子元素都應(yīng)該需要一個(gè)唯一的key值

在這里可以使用列表的id屬性作為key值以解決上面這個(gè)警告

 
 
 
 
      
  
  
  
  1. const List = () => { 
    2.   
  
  
  
  2.   return ( 
    3.   
  
  
  
  3.     
         
  
  
  
    •       {data.map((item) => ( 
      •   
  
  
  
    •          
      •   
  
  
  
    •       ))} 
      •   
  
  
  
    •     
     
    4.   
  
  
  
  4.   ); 
    5.   
  
  
  
  5. }; 
    6.

二、作用

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

因此key的值需要為每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)

如果列表數(shù)據(jù)渲染中，在數(shù)據(jù)后面插入一條數(shù)據(jù)，key作用并不大，如下：

 
 
 
 
      
  
  
  
  1. this.state = { 
    2.   
  
  
  
  2.     numbers:[111,222,333] 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. insertMovie() { 
    6.   
  
  
  
  6.   const newMovies = [...this.state.numbers, 444]; 
    7.   
  
  
  
  7.   this.setState({ 
    8.   
  
  
  
  8.     movies: newMovies 
    9.   
  
  
  
  9.   }) 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11.  
    12.   
  
  
  
    12.    
  
  
  
    •     { 
      •   
  
  
  
    •         this.state.movies.map((item, index) => { 
      •   
  
  
  
    •             return 
    • {item}
      •    
  
  
  
    •         }) 
      •   
  
  
  
    •     } 
      •   
  
  
  
     
    13.

前面的元素在diff算法中，前面的元素由于是完全相同的，并不會(huì)產(chǎn)生刪除創(chuàng)建操作，在最后一個(gè)比較的時(shí)候，則需要插入到新的DOM樹中

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

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

 
 
 
 
      
  
  
  
  1. insertMovie() { 
    2.   
  
  
  
  2.   const newMovies = [000 ,...this.state.numbers]; 
    3.   
  
  
  
  3.   this.setState({ 
    4.   
  
  
  
  4.     movies: newMovies 
    5.   
  
  
  
  5.   }) 
    6.   
  
  
  
  6. } 
    7.

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

當(dāng)沒有key的時(shí)候，所有的li標(biāo)簽都需要進(jìn)行修改

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

主要是因?yàn)椴粚慿ey是將所有的文本內(nèi)容替換一下，節(jié)點(diǎn)不會(huì)發(fā)生變化

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

三、總結(jié)

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

  • key 應(yīng)該是唯一的
  • key不要使用隨機(jī)值(隨機(jī)數(shù)在下一次 render 時(shí)，會(huì)重新生成一個(gè)數(shù)字)
  • 避免使用 index 作為 key

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

參考文獻(xiàn)

https://zh-hans.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper

https://segmentfault.com/a/1190000017511836


文章標(biāo)題：面試官：React中的Key有什么作用？
文章網(wǎng)址：http://www.dlmjj.cn/article/dhjcjce.html