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

前言

大家应该都知道,在 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

意思就是, 你必须为数组中的元素提供唯一的 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

时间: 2017-08-06

关于react中组件通信的几种方式详解

前言 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦,下面这篇文章就来给大家详细介绍下,在开始之前先来看一张图: react组件通信 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx import React from 'react'; import Pro

PHP中filter函数校验数据的方法详解

介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

Java中map遍历方式的选择问题详解

1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keySet拿到的只是key的集合,针对每个key,都要去Map中额外查找一次value,从而降低了总体效率.那么实际情况如何呢? 为了解遍历性能的真实差距,包括在遍历key+value.遍历key.遍历value等不同场景下的差异,我试着进行了一些对比测试. 2. 对比测试 一开始只进行了简单的测试,但结果却表明k

基于java集合中的一些易混淆的知识点(详解)

(一) collection和collections 这两者均位于java.util包下,不同的是: collection是一个集合接口,有ListSet等常见的子接口,是集合框架图的第一个节点,,提供了对集合对象进行基本操作的一系列方法. 常见的方法有: boolean add(E e) 往容器中添加元素:int size() 返回collection的元素数:boolean isEmpty() 判断此容器是否为空: boolean contains(Object o) 如果此collecti

对python中字典keys,values,items的使用详解

在python中对字典进行遍历时,可以直接使用如下模式: dict = {"name": "jack", "age": 15, "height": 1.75} for k in dict.keys(): print(k) 使用keys方法遍历得到的是key,可以依次输出,但是当单独使用dict.keys() 时,得到的结果时dict.keys类,属于迭代器,此时并不能使用列表的下标,需要转换一下,方法如下: 直接使用list(

PHP7.1中使用openssl替换mcrypt的实例详解

在php开发中,使用mcrypt相关函数可以很方便地进行AES加.解密操作,但是PHP7.1中废弃了mcrypt扩展,所以必需寻找另一种实现.在迁移手册中已经指出了用openssl代替mcrypt,但未给出具体示例.网上有很多示例,可以替换大部分场景,但对于其中细节却并未说明.同样,简单地使用网上示例在某种代码场景下有可能导致代码替换前后的兼容问题,以下则来谈谈具体代码及原因. 首先我们直接给出替换的代码,再从代码中分析问题.(本文中分析的算法是AES-128-CBC) 替换示例 示例会展示两种

JS中实现浅拷贝和深拷贝的代码详解

(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. 基本类型值 在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种. 基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值

python3中sorted函数里cmp参数改变详解

今天在刷leetcode的时候,对于179题返回最大数,用python2中的sorted(cmp)会很方便,但是在python3中这一参数被取消了,经过查找,发现应该借助functools中的cmp_to_key函数,直接贴代码 import functools def cmp(a,b): if a > b : return -1 elif a < b : return 1 else: return 0 nums = [1,2,3,4,5,6] sorted_nums = sorted(num

Python中常用的高阶函数实例详解

前言 高阶函数指的是能接收函数作为参数的函数或类:python中有一些内置的高阶函数,在某些场合使用可以提高代码的效率. lambda 当在使用一些函数的时候,我们不需要显式定义函数名称,直接传入lambda匿名函数即可.lambda匿名函数通常和其他函数搭配使用. 比如可以直接使用如下的lambda表达式计算当x=3时,y = x * 3 + 5的函数值. In [1]: (lambda x: x * 3 + 5)(3) Out[1]: 14 map map函数将一个函数和序列/迭代器(可以传