- 当前位置：首页 >焦点 >面试官：React中的Key有什么作用？
面试官：React中的Key有什么作用？
发布时间：2025-11-05 12:01:11 来源：创站工坊 作者：IT科技类资讯
本文转载自微信公众号「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标签都需要进行修改
同样，并不是b2b供应网拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高
主要是因为不写key是将所有的文本内容替换一下，节点不会发生变化
而写key则涉及到了节点的增和删，发现旧key不存在了，则将其删除，新key在之前没有，则插入，这就增加性能的开销
三、总结
良好使用key属性是性能优化的非常关键的一步，注意事项为：
key 应该是唯一的 key不要使用随机值(随机数在下一次 render 时，会重新生成一个数字) 避免使用 index 作为 keyreact判断key的流程具体如下图：
参考文献
https://zh-hans.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper
https://segmentfault.com/a/1190000017511836
- 上一篇：在过去的几个星期，（几乎）每次都有消息 Ubuntu 15.04在启动时检测到系统程序错误 跑出来“欢迎”我。那时我是直接忽略掉它的，但是这种情况到了某个时刻，它就让人觉得非常烦人了！检测到系统程序错误(System program problem detected)你想立即报告这个问题吗？我肯定地知道假如你是一个Ubuntu用户，你可能曾经也遇到过这个恼人的弹窗。在本文中，我们将探讨在Ubuntu 14.04和15.04中遇到检测到系统程序错误(system program problem detected)时 应该怎么办。怎么解决Ubuntu中检测到系统程序错误的错误对不起，Ubuntu发生了一个内部错误是个Apport（LCTT 译注：Apport是Ubuntu中错误信息的收集报告系统，详见Ubuntu Wiki中的Apport篇），它将会进一步的打开网页浏览器，然后你可以通过登录或创建Launchpad帐户来填写一份漏洞（Bug)报告文件。你看，这是一个复杂的过程，它要花整整四步来完成。但是我想帮助开发者，让他们知道这个漏洞啊 !对，也不对。假如你想的话，在你第一次看到它的时候报告它。你可以在上面图片显示的“显示细节（Show Details)”中，查看崩溃的程序。但是假如你总是看到它，或者你不想报告漏洞（Bug)，那么我建议你还是一次性摆脱这个问题吧。修复Ubuntu中“检测到系统程序错误”的错误我的建议是删除这些错误报告。打开一个终端，执行下面的命令：复制代码代码如下:假如你这样做，系统中任何程序崩溃时，系统都不会再通知你。假如你想问问我的看法的话，我会说，这不是一件坏事，除非你愿意填写错误报告。假如你不想填写错误报告，那么这些错误通知存不存在都不会有什么区别。要禁止Apport，并且彻底地摆脱Ubuntu系统中的程序崩溃报告，打开一个终端，输入以下命令：复制代码代码如下:复制代码代码如下:# 设置0表示禁用Apportw，或者1开启它。# 你可以用下面的命令暂时关闭它：# sudo service apport start force_start=1enabled=1把enabled=1改为enabled=0。保存并关闭文件。完成之后你就再也不会看到弹窗报告错误了。很显然，假如我们想重新开启错误报告功能，只要再打开这个文件，把enabled设置为1就可以了。
- 下一篇：Ubuntu 系统有自己的自动更新升级机制，但是有时候也需要手动执行更新。比如，某软件发现了漏洞，需要及时更新补丁，但是自动升级的提示还没有出现，这时就需要手动执行更新升级，看看有没有可用的更新。Ubuntu 15.10候最终选版ISO镜像下载 正式版10月22日发布一、图形界面更新升级1、访问 Ubuntu 的更新设置。在左侧启动器栏上，点击“扳手齿轮”图标的“系统设置”图标，启动系统设置，点击打开“软件和更新”，然后单击“更新”选项卡。2、假如需要手动执行系统更新：按下键盘上的 Win 键；或者点击左侧启动器栏上方的 Ubuntu 标志图标，启动 Dash；在搜索框中输入：update。3、Dash 将筛选出“软件更新器”这个应用程序。按下回车，软件更新器应用程序即会启动，并开始检查更新。4、视网络状况，更新检查会花一段时间。待检查结束，而且目前存在需要更新的内容，系统会用对话框的方式进行提示。5、假如想了解所要更新项目，它们具体有哪些改动，可以点击一个项目，然后展开对话框下方的“技术说明”。6、点击“立即安装”，开始本次更新过程。大部分情况下，更新需要输入用户密码。7、更新的下载和安装过程开始。在此期间，可以展开“详情”，时刻关注下载、安装进度。8、更新被安装完成后，根据不同情况，可能需要重新启动系统；假如不是非常重要的更新，系统也不会要求重新启动。 二、命令行界面更新升级1、按 Ctrl＋alt＋t，打开终端，输入：$ sudo apt-get update，用于检查当前的源服务器上，是否有可用的更新。2。接着执行：$ sudo apt-get upgrade，用于对当前已经安装的包进行升级。上述命令假如出现不成功的提示，有可能是因为软件包之间的依赖关系导致的问题。这时，可以用以下命令代替：$ sudo apt-get dist-upgrade相关推荐： ubuntu14.10升级ubuntu15.04的详细教程 从Ubuntu 14.04 升级到 Ubuntu 14.10的具体方法
- 以爱数发展前景（数字化教育产业将成为未来发展的巨大机遇）
- 支持每秒上万单的秒杀扣库存事务
- 高性能限流器 Guava RateLimiter
- 软件开发的「两全」其美：全自动 全栈式
- windows连接ubuntu
- 有了这些神器，随时随地获取优秀技术前沿!
- 聊聊如何实现 LRU 缓存算法
- Python或R：哪种编程语言更适合数据科学？
- 1、安装wpa_supplicant apt-get install wpasupplicant 2、创建/etc/wpa_supplicant.conf包含以下内容： network={ ssid=你的无线网ssid psk=你的wpa口令 key_mgmt=WPA-PSK proto=WPA pairwise=TKIP } 3、编辑/etc/network/interfaces iface eth1 inet dhcp pre-up wpa_supplicant -Bw -Dwext -ieth1 -c/etc/wpa_supplicant.conf post-down killall -q wpa_supplicant 注：eth1是你的网卡，并且假设你使用dhcp协议。 4、启动你的网卡 ifup eth1 假如有必要请关闭你的有线网络（ifdown eth0），防止路由问题。
- SpringBoot 整合 ES 进行各种高级查询搜索
IT技术网源码下载企商汇香港云服务器IT资讯网服务器租用益华科技亿华云源码库益华IT技术论坛技术快报益强资讯优选多维IT资讯科技前瞻益华科技亿华智造智能时代益华科技运维纵横益强IT技术网益强数据堂极客码头益强编程舍益强前沿资讯编程之道亿华云创站工坊亿华互联全栈开发亿华云计算益强智未来益强科技汇智坊亿华科技益强智囊团亿华灵动亿华智慧云云站无忧极客编程益强科技IT资讯网益强编程堂码上建站码力社
- Copyright © 2025 Powered by 面试官：React中的Key有什么作用？,创站工坊 滇ICP备2023006006号-44sitemap