React中使用collections时key的重要性详解


Posted in Javascript onAugust 07, 2017

前言

大家应该都知道,在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered,下面话不多说,来一起看看详细的介绍:

React 不会 render 重复的 keys

为了彻底明白这个, 我们来声明一个这样的数组

const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的

现在, 我们在 react 中来 render

<ul>
 {nums.map(num => <li key={num}>{num}</li>)}
</ul>

这小段代码构造出的理想 element 结构, 应该是这样的

<ul>
 <li key="1">1</li>
 <li key="2">2</li>
 <li key="3">3</li>
 <li key="5">5</li>
 <li key="2">2</li>
</ul>

然而, 实际 DOM 是这样的

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>5</li>
</ul>

React 给出了以下warning

React中使用collections时key的重要性详解 

意思就是, 你必须为数组中的元素提供唯一的 key 值

React 会 re-render 某个 key 指向的内容发生变化的元素

我们来看一个向 users 集合添加 user 的例子

const users = [
 {username:'bob'},
 {username:'sue'}
];

users.map((u, i) =>
 <div key={u.username}>{u.username}</div>);

render 的结果如下

<div key="bob">bob</div>
<div key="sue">sue</div>

现在, 我们更新一下 users

const users = [
 {username:'joe'},
 {username:'bob'},
 {username:'sue'}
];

render 的结果将会改变如下

<div key="joe">joe</div>
<div key="bob">bob</div>
<div key="sue">sue</div>

在上面例子中, React 调用了它的 Reconciliation 算法, 然后把返回的结果也就是一个 key 为 sue 的新元素添加到了 users 的最前面

如何选择 Key

其实, 即使内容没有发生变化, 改变对应的 key 值, React 也会触发 re-render.

使用 map 函数的 index 来作为元素的 key, 对开发者来说是常见的, 因为有时这是必要的, 然而, 有时这也会导致性能下降问题

users.map((u, i) =>
 <div key={i}>{u.username}</div>);

还是以上的例子, 作了一点小小的改变后, React 瞬间由一个步骤变成了三个步骤:

  • 将 id 为 "1" 的元素从 "bob" 更改为 "joe"
  • 将 id 为 "2" 的元素从 "sue" 更改为 "bob"
  • 新增一个 id 为 "3" 的元素, 他的值为 "sue"

总结

所以, 当我们使用 collections 时, 不仅不能忘了 Key, 还要学会选择好的 Key.

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

原文链接: Why you need keys for collections in React

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
React中的render何时执行过程
Apr 13 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
react路由配置方式详解
Aug 07 #Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 #Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
bootstrap table表格客户端分页实例
Aug 07 #Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python自定义函数def的应用详解
2020/06/03 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
浅析python函数式编程
2020/09/26 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
计算机操作自荐信
2013/12/07 职场文书
大学毕业感言
2014/01/10 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
神农溪导游词
2015/02/11 职场文书
小学大队委竞选口号
2015/12/25 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python