一、是什么

首先,给出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. };
  1. 然后在输出就可以看到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.name} key={item.id}></ListItem>
  6. ))}
  7. </ul>
  8. );
  9. };
  1. 二、作用

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

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

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

  1. this.state = {
  2. numbers:[111,222,333]
  3. }
  4.  
  5. insertMovie() {
  6. const newMovies = [...this.state.numbers, 444];
  7. this.setState({
  8. movies: newMovies
  9. })
  10. }
  11.  
  12. <ul>
  13. {
  14. this.state.movies.map((item, index) => {
  15. return <li>{item}</li>
  16. })
  17. }
  18. </ul>
  1. 前面的元素在diff算法中,前面的元素由于是完全相同的,并不会产生删除创建操作,在最后一个比较的时候,则需要插入到新的DOM树中

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

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

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

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

React中的key的作用的更多相关文章

  1. React 中的key值

    在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...

  2. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  3. react中对于key值的理解

    1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...

  4. react中路由不起作用的奇怪现象

    同样的两段Router代码,为什么一段正常,一段不起作用(也没有任何错误log提示) 瞪着眼观察也看不出为什么... 通过选中高亮显示内容相同, 为何就是有一段路由不管用呢? 折腾半天发现... 大小 ...

  5. react中label标签的作用

    当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域 代码如下:

  6. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  7. react,vue中的key有什么作用?(key的内部原理)

    1.虚拟DOM中的key的作用: key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较. 2.比较规则 ...

  8. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

  9. react中key的使用

    面试题: 1). react/vue中的key的作用/内部原理 2). 为什么列表的key尽量不要用index 虚拟DOM的key的作用? 1). 简单的说: key是虚拟DOM对象的标识, 在更新显 ...

  10. react key的作用

    react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的. 简单来说,react利用key ...

随机推荐

  1. vscode 点左下角 切换分支 不显示远程分支 git

    查看当前分支 git branch -vv 查看所有分支 包含远程分支 git branch -a 放弃merge // 这个很重要 git merge --abort 暂存 git stash 拉取 ...

  2. linux-关于conio.h文件的文件缺失问题

    链接: https://pan.baidu.com/s/1Qzo4CkJB1_5E-3rDLtfG4Q 提取码: fh65 编辑以下这个依赖库就可以了 $ cd libconio-1.0.0 $ ./ ...

  3. Eclipse之各个版本的区别

    经常用到的是前五个版本: Eclipse IDE for Java EE Developers:是为J2EE开发的版本: Eclipse Classic:是Eclipse的经典版本,没有安装任何插件, ...

  4. Welcome to YARP - 2.3 配置功能 - 配置过滤器(Configuration Filters)

    目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...

  5. 2023年VR虚拟现实的10个应用行业

    1.医疗保健 现代医疗保健的培训方式离不开VR虚拟现实..由于医疗行业的特殊性,不允许拿大量的病人来练手,但医疗又非常注重实践,一些新手医生就缺乏锻炼的机会,而VR虚拟现实技术很好的解决了这一问题.医 ...

  6. 03.Android崩溃Crash库之ExceptionHandler分析

    目录总结 00.异常处理几个常用api 01.UncaughtExceptionHandler 02.Java线程处理异常分析 03.Android中线程处理异常分析 04.为何使用setDefaul ...

  7. 记录--巧用 overflow-scroll 实现丝滑轮播图

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言: 近期我在项目中就接到了一个完成轮播图组件的需求.最开始我也像大家一样,直接选择使用了知名的开源项目 "Swiper&qu ...

  8. Spring Boot 工程开发常见问题解决方案,日常开发全覆盖

    本文是 SpringBoot 开发的干货集中营,涵盖了日常开发中遇到的诸多问题,通篇着重讲解如何快速解决问题,部分重点问题会讲解原理,以及为什么要这样做.便于大家快速处理实践中经常遇到的小问题,既方便 ...

  9. Spring Cloud项目搭建版本选择

    1.查看spring cloud的版本 https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4 ...

  10. KingbaseES 中select for update语句引起的锁问题

    背景 客户现场执行压测时候,发生周期性的TPS大幅下降,通过查看kwr报告发现DBcpu时间占DBtime时间很少,百分之90的DBtime花费在tuple锁等待上,等待事件类型是lock. 等待时间 ...