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 相关文章推荐
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
安装vue-cli的简易过程
May 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
如何让vue长列表快速加载
Mar 29 Vue.js
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
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
页面使用密码保护代码
2013/04/10 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery实现跨域
2015/02/03 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
celery4+django2定时任务的实现代码
2018/12/23 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python实现两个文件夹的同步
2019/08/29 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python装饰器代替set get方法实例
2019/12/19 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
电子专业推荐信范文
2013/11/18 职场文书
企业项目策划书
2014/01/11 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Python列表的索引与切片
2022/04/07 Python