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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Shell编程面试题
2012/05/30 面试题
荷叶圆圆教学反思
2014/02/01 职场文书
爱国演讲稿400字
2014/05/07 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
小学教师个人总结
2015/02/05 职场文书
联村联户简报
2015/07/21 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript