[[409483]]

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

一、是什么

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

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

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

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

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

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

const List = () => { 
  return ( 
    <ul> 
      {data.map((item) => ( 
        <ListItem name={item.name} key={item.id}></ListItem> 
      ))} 
    </ul> 
  ); 
}; 

二、作用

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

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

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

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

前面的元素在diff算法中，前面的元素由于是完全相同的，并不會(huì)產(chǎn)生刪除創(chuàng)建操作，在最后一個(gè)比較的時(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)不會(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