[[409483]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

一、是什么

首先，給出react組件中進行列表渲染的一個示例：

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. 

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

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

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

二、作用

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

因此key的值需要為每一個元素賦予一個確定的標識

如果列表數據渲染中，在數據后面插入一條數據，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算法中，前面的元素由于是完全相同的，并不會產生刪除創建操作，在最后一個比較的時候，則需要插入到新的DOM樹中

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

下面再來看看在前面插入數據時，使用key與不使用key的區別：

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

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

當沒有key的時候，所有的li標簽都需要進行修改

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

主要是因為不寫key是將所有的文本內容替換一下，節點不會發生變化

而寫key則涉及到了節點的增和刪，發現舊key不存在了，則將其刪除，新key在之前沒有，則插入，這就增加性能的開銷

三、總結

良好使用key屬性是性能優化的非常關鍵的一步，注意事項為：

• key 應該是唯一的
• key不要使用隨機值(隨機數在下一次 render 時，會重新生成一個數字)
• 避免使用 index 作為 key

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

參考文獻

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

https://segmentfault.com/a/1190000017511836