详细说明React键值的功能和用途

在react项目中总会有这样一个坑

这是一个警告，数组遍历子元素应该有一个唯一的键值，但是到底什么是key，它在代码中扮演什么角色呢？

密钥概述

react中的key属性是一个特殊的属性，它不是为开发人员设置的(例如，为一个组件设置了key之后，仍然不能得到这个组件的key值)，而是为react本身设置的。

简单来说，react是用钥匙来识别部件的，这是一种识别，就像我们的身份证是用来识别一个人一样。每个键对应一个组件，同一个键react被认为是同一个组件，因此不会创建与同一个键对应的后续组件。

密钥的使用场景

在项目开发中，键属性最常用于数组动态创建子组件的情况，因此需要为每个子组件添加唯一的键属性值。那么自然有人会认为key和动态渲染的子元素得到的索引位置的值非常接近，不可能直接用index key={index}来附加key的值？

例如：

{dataList.map((item，index)={ return div style={ mystyle } key={ index } { item . name }/div })}

试了以后，你会发现报错渲染没有任何问题是不正常的。但是，强烈建议不要将数组索引用作键。如果数据更新只是数组重新排序或在其中间位置插入新元素，视图元素将被重新呈现。

例如：

原来索引=2的元素向前移动后，这个元素的key也发生了变化，使得变化的Key没有存在意义。既然是“身份证”存在，就不能丢。当然，当您创建带有键值的子组件时，如果数组的内容只显示为纯文本，并且不涉及数组的动态变化，那么您实际上可以使用index作为键。

键值必须是唯一且稳定的

对key值做了几次处理后，我觉得Key值和数据库中的主键id类似，是唯一的，唯一的。

//this.state.users内容。注：李四和王五身份证相同！这个。state={users: [{id:1，名： '张三' }，{id33602，名： '李四' }，{id33602，名： '王武' }]，//省略}render()返回(div h3用户列表/H3 {this。state . users . map(u=div key={ u . id } { u . id } : { u . name }/div)}/div)；注意，在上面的例子中，在动态渲染的数据中，key是由数据的id决定的，而李四和王五的id是相同的，这导致了Key的相似性。最终渲染结果是张三和李四，没有显示王五。主要原因是react根据key认为李四和王五是同一个组件(李四和王五的key值相同)，导致第一个被渲染，后续的被丢弃。

这样，利用密钥属性，可以与组件建立对应关系，react可以根据密钥决定是销毁重新创建的组件还是更新组件。

此外，密钥还应确保值的稳定性，例如：

{datalist.map ((item，index)={ return div style={ mystyle } key={ Math.random()} { item . name }/div })}特别是如上例所示，key的值是由math . random()随机生成的，这会导致数组元素中的每个项被销毁，然后重新创建。此外，它可能会导致一些意想不到的问题。

因此，Key的值必须保证其唯一性和稳定性。因此，当密钥不能由random随机生成时，我们可以使用一个全局localCounter变量来添加一个稳定且唯一的密钥值，如下所示。

var local counter=1；this . data . foreach(El={ El . id=local counter；});//函数创建用户(user){ return }的其他注意事项.用户，id:本地计数器}}动态向数组添加元素时的键

当然，除了给数据元素生成的组件添加密钥，并且密钥应该是稳定和唯一的之外，还应该注意以下几点：

键属性被添加到自定义子组件，而不是子组件内部的顶级组件。

//mycomponent.render () {//errordiv键={{item。key}} {{item。名称}}/div}.//rightmycomponent键={{item。key } }/key值的唯一性有一个范围，即在数组生成的同级别同类型的组件上应该是唯一的，而不是全部。

Key不仅可以用在数组生成组件中，还可以用在其他地方，主要是因为react使用key来区分组件。同一个键表示同一个组件，react不会再破坏和创建组件实例，只会更新它们；关键是不同的，react将破坏现有的组件实例并重新创建新的组件实例。

{this.state.type？div Son_1/Son_2//div : div son _ 2/Son_1//div }例如，在上面的代码中，当this.state.type的值发生变化时，Son _ 1和Son _ 2组件的原始实例将被销毁，而Son _ 1和Son _ 2组件的新实例将被重新创建，它们不能继承原始状态。事实上，他们只交换位置。为了避免这个问题，我们可以给组件添加一个键。

{this.state.type？Div Son_1键=' 1'/son _ 2键=' 2 '/div : div Son _ 2键=' 2'/son _ 1键=' 1 '/div }这样，当this.state.type的值改变时，Son_1和Son2组件的实例不会被重新创建，react只是替换它们

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。