详细说明在React中使用集合时键的重要性

序

每个人都应该知道，在React中，key在呈现集合的项时起着重要的作用，它直接决定了下一次渲染和重新渲染。下面就不多说了，我们来看看详细的介绍：

React不渲染重复的关键点

为了完全理解这一点，让我们像这样声明一个数组

const nums=[1，2，3，5，2]；//它有两个值相等的元素。现在，让我们在react中渲染

ul { nums . map(num=likey={ num } { num }/Li)}/ul这个短代码构造的理想元素结构应该是这样的

Ul Li键=' 1' 1/Li Li键=' 2' 2/Li Li键=' 3' 3/Li Li键=' 5' 5/Li Li键=' 2' 2/Li/ul然而，实际的DOM是这样的

ulli 1/Lili 2/Lili 3/Lili 5/Li/ulreact给出以下警告

这意味着您必须为数组中的元素提供唯一的键值

当一个键指向一个元素时，它的内容被改变

让我们看一个将用户添加到用户集合的例子

const user=[{ username : ' bob ' }，{ username : ' sue ' }]；users.map((u，I)=div key={ u . username } { u . username }/div)；渲染的结果如下

div key=' Bob ' Bob/div div key=' Sue ' Sue/div现在，让我们更新用户

const users=[{ username : ' Joe ' }，{username:'bob'}，{ username : ' sue ' }]；渲染结果将发生如下变化

div key=' Joe ' Joe/div div key=' Bob ' Bob/div key=' sue ' Sue/div在上面的例子中，React调用其对账算法，然后将返回的结果，也就是键为Sue的新元素添加到用户面前

如何选择密钥

实际上，即使内容没有变化，相应的键值也发生了变化，React也会触发重新渲染。

对于开发人员来说，使用map函数的索引作为元素的键是很常见的，因为有时它是必要的，但是，有时它也会导致性能下降

users.map((u，I)=div key={ I } { u . username }/div)；在上面的例子中，稍加改动后，React瞬间从一步变成了三步：

将id为“1”的元素从“bob”更改为“joe ”,将id为“2”的元素从“sue”更改为“bob ”,并添加一个id为“3”的元素，其值为“sue”summary

因此，我们在使用收藏时，不仅要忘记钥匙，还要学会选择一把好钥匙。

好了，这就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。

原始链接：为什么你需要在react集合的关键