React key值的作用和使用

ygyooo 发布于2019-08-23 11:26 / 3315人阅读

摘要：主要是因为根据认为李四和王五是同一个组件李四和王五的值相同，导致第一个被渲染，后续的会被丢弃掉。所以，的值必须保证其唯一和稳定性

在react项目中总会遇到这样一个的坑

这是警告数组遍历子元素要有一个唯一的key值，但是key到底是什么，在代码中到底起了什么作用？

key概述

react中的key属性，它是一个特殊的属性，它的出现不是给开发者用的（例如你为一个组件设置key之后，也仍无法获取这个组件的key值），而是给react自己用的。
简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。

key的使用场景

在项目开发中，key属性的使用场景最多的还是由数组动态创建的子组件的情况，需要为每个子组件添加唯一的key属性值。那会有的人就会自然而然想到，key和动态渲染的子元素获取的index位置的值很接近，那不是可以直接用index附上key的值呢key={index}?

例如：
{dataList.map((item,index)=>{
        return {item.name}
        })
}

在你尝试过后会发现，报错没了，渲染也没问题不是很正常嘛？！但是强烈不推荐用数组index来作为key。
如果数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染。

例如：
本来index=2的元素向前移动后，那该元素的key不也同样发生了改变那这样会改变的Key就没有任何的存在意义，既然是作为“身份证”一样的存在，那就不容有失。当然，在你用key值创建子组件的时候，若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。

key的值必须保证唯一且稳定

我在与Key值打过几次交道过后，觉得key值就类似于数据库中的主键id一样，有且唯一。

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: "张三"}, {id:2, name: "李四"}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  
    用户列表
    {this.state.users.map(u => {u.id}:{u.name})}
  
 )
);

注意以上范例中，动态渲染的数据中，key以数据的id来定，而李四、王五的id相同而导致Key的雷同，最后的渲染结果为张三和李四，王五并没有展示出来。主要是因为 react根据key认为李四和王五是同一个组件（李四和王五的key值相同），导致第一个被渲染，后续的会被丢弃掉。

这样，有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。

并且，Key也要保证值的稳定性，例如：

{dataList.map((item,index)=>{
        return {item.name}
        })
}

尤其如以上范例中所示，key的值以Math.random()随机生成而定，这使得数组元素中的每项都重新销毁然后重新创建，有一定的性能开销；另外可能导致一些意想不到的问题出现。

所以，Key的值必须保证其唯一和稳定性

云服务器私有云 react使用webrtc 使用代理服务器作用是功能和作用的区别 ip地址和域名的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96969.html

[React技术内幕] key带来了什么

摘要：启发式算法了解一下什么是启发式算法启发式算法指人在解决问题时所采取的一种根据经验规则进行发现的方法。这将会造成极大的性能损失和组件内的丢失。但这都是的内部实现方式，可能在后序的版本中不断细化启发式算法，甚至采用别的启发式算法。　　首先欢迎大家关注我的掘金账号和Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　大家在使用R...

cnTomato 2019-08-20 19:08 评论0 收藏0
React组件性能优化：PureRender和Immutable Data

摘要：插件允许我们在的语法中使用在传递数据时，可以通过进一步提升组件的渲染性能，是针对可变对象和不可变对象所做的折衷。使用之后，仅仅改变状态了的组件及其父组件被重新渲染。 1 前言网页性能最大的限制因素是浏览器重绘(reflow)和重排版(repaint)，React的虚拟DOM就是为了尽可能减少浏览器的重绘和重排版，从React的渲染过程看，避免不必要的渲染可以进一步提高性能。 2 Pu...

megatron 2019-08-20 14:42 评论0 收藏0
MobX

摘要：建议将它们用于修改可观察量或具有副作用的任何函数中。这意味着在一些定时器或者网络请求，异步处理的情况下，它们的回调函数无法对状态做成改变。这些回调函数都应该有包裹，如果例子里面的一样。 1. 介绍 1.1. 原理 React的render是状态转化为树状结构的渲染组件的方法而MobX提供了一种存储，更新状态的方法 React 和 MobX都在优化着软件开发中相同的问题。 ...

Alliot 2019-08-20 14:06 评论0 收藏0
从react-start到co源码(三)

摘要：第三篇脚手架依赖的核心库的源码解析。该篇是这个系列文章的第三篇主要是对的源码进行分析讲解。的源码十分简单但实现的功能却是十分的强大。源码概括源码主要包含了两部分公共方法和私有方法。 react作为当前十分流行的前端框架，相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事，必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要针对于react小白，...

wind5o 2019-08-20 13:55 评论0 收藏0
Mobx4.X状态管理入门

摘要：前言原本说接下来会专注学但是最新工作又学习了一些有意思的库於是就再写下来做个简单的入门之前我写过一篇文章这个也算是作為一个补充吧这次无非就是类似笔记把认为的一些关键点记下来有些地方还没用到就衹是描述一下代码有些自己写的有些文档写的很好就搬下前言原本说接下来会专注学nodejs,但是最新工作又学习了一些有意思的库,於是就再写下来做个简单的入门,之前我写过一篇文章,这个也算是作為一个补...

CKJOKER 2019-08-26 10:36 评论0 收藏0