面试官:React中的Key有什么作用?

开发 前端
跟Vue一样,React 也存在diff算法,而元素key属性的作用是用于判断元素是新创建的还是被移动的元素,从而减少不必要的Diff。

[[409483]]

本文转载自微信公众号「JS每日一题」,作者灰灰。转载本文请联系JS每日一题公众号。

一、是什么

首先,给出react组件中进行列表渲染的一个示例:

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

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

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

根据意思就可以得到渲染列表的每一个子元素都应该需要一个唯一的key值

在这里可以使用列表的id属性作为key值以解决上面这个警告

  1. const List = () => { 
  2.   return ( 
  3.     <ul> 
  4.       {data.map((item) => ( 
  5.         <ListItem name={item.namekey={item.id}></ListItem> 
  6.       ))} 
  7.     </ul> 
  8.   ); 
  9. }; 

二、作用

跟Vue一样,React 也存在diff算法,而元素key属性的作用是用于判断元素是新创建的还是被移动的元素,从而减少不必要的Diff

因此key的值需要为每一个元素赋予一个确定的标识

如果列表数据渲染中,在数据后面插入一条数据,key作用并不大,如下:

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

前面的元素在diff算法中,前面的元素由于是完全相同的,并不会产生删除创建操作,在最后一个比较的时候,则需要插入到新的DOM树中

因此,在这种情况下,元素有无key属性意义并不大

下面再来看看在前面插入数据时,使用key与不使用key的区别:

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

当拥有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

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2021-07-05 11:06:11

组件React通信

2021-07-02 07:06:20

React组件方式

2021-08-02 08:34:20

React性能优化

2021-07-01 07:51:45

React事件绑定

2021-06-29 09:47:34

ReactSetState机制

2020-04-23 14:09:13

URI挖坑前端

2023-10-12 07:35:45

面试线程通信

2021-07-14 08:00:13

reactCss模块

2021-07-08 06:51:29

React函数组件

2021-03-01 12:40:02

JavaserialVersi代码

2021-12-10 12:01:37

finalfinallyfinalize

2021-11-30 07:44:50

FinalFinallyFinalize

2023-02-17 08:10:24

2021-12-20 10:30:33

forforEach前端

2021-06-30 07:19:36

React事件机制

2023-02-20 08:08:48

限流算法计数器算法令牌桶算法

2021-07-15 07:23:25

React动画页面

2021-07-13 07:52:03

ReactHooks组件

2023-07-11 08:40:02

IO模型后台

2024-02-26 14:07:18

点赞
收藏

51CTO技术栈公众号