旷世神医,完美世界有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

面試官：React中的Key有什么作用？

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

創(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)行列表渲染的一個示例：

 
 
 
   
  
  
  const data = [   
  
  
    { id: 0, name: 'abc' },   
  
  
    { id: 1, name: 'def' },   
  
  
    { id: 2, name: 'ghi' },   
  
  
    { id: 3, name: 'jkl' }   
  
  
  ];   
  
  
     
  
  
  const ListItem = (props) => {   
  
  
    return 
{props.name};   
  
  
  };   
  
  
     
  
  
  const List = () => {   
  
  
    return (   
  
  
         
  
  
        {data.map((item) => (   
  
  
             
  
  
        ))}   
  
  
      
   
  
  
    );   
  
  
  };

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

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

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

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

 
 
 
   
  
  
  const List = () => {   
  
  
    return (   
  
  
         
  
  
        {data.map((item) => (   
  
  
             
  
  
        ))}   
  
  
      
   
  
  
    );   
  
  
  };

二、作用

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

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

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

 
 
 
   
  
  
  this.state = {   
  
  
      numbers:[111,222,333]   
  
  
  }   
  
  
     
  
  
  insertMovie() {   
  
  
    const newMovies = [...this.state.numbers, 444];   
  
  
    this.setState({   
  
  
      movies: newMovies   
  
  
    })   
  
  
  }   
  
  
     
  
  
     
  
  
      {   
  
  
          this.state.movies.map((item, index) => {   
  
  
              return 
{item}   
  
  
          })   
  
  
      }

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

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

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

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

當(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)不會發(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í)，會重新生成一個數(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

網(wǎng)頁題目：面試官：React中的Key有什么作用？
文章位置：http://fisionsoft.com.cn/article/dhjcjce.html

新聞中心

一、是什么

二、作用

三、總結(jié)

其他資訊

二、作用