从数组中渲染项目时正确选择 React 键答案

【问题标题】：Properly choosing React keys while rendering items from array从数组中渲染项目时正确选择 React 键
【发布时间】：2021-09-20 20:49:31
【问题描述】：

我最近一直在研究 React 中元素键的重要性，但我仍然对此感到有些困惑。

我有这种情况，其中有 datagrid 组件负责按行显示数据。实现了排序、过滤和分页。我从 api 获取行数据。

问题是：我应该如何正确选择地图功能元素（行）的键？

问题是已经获取的行数据可以在刷新之间改变（被其他用户编辑）。

我应该为关键属性使用唯一的 ID（例如 nanoid）还是使用 row.id？

如果我理解正确，即使更改了某些行数据，使用 row.id 也不会对已加载的行进行行重新渲染。另一方面，使用唯一 ID（如 nanoid）会对排序、过滤等时的性能产生负面影响...？

我做对了吗，然后如何正确地做到这一点？

【问题讨论】：

最重要的是你应该选择一个stable键。该行独有的东西不会改变。 ID 是一个完美的选择。
如果我理解正确，即使更改了某些行数据，使用 row.id 也不会重新渲染已加载的行。 - 这是不正确的。这仅意味着 React 在决定是否需要重新渲染/安装/卸载时可以正确识别您的行。正常的重新渲染规则适用，如果状态或道具发生变化，它将重新渲染。
我通常将描述项目本身的单词和它的索引（来自.map(item, index)）连接起来，例如：<tr key={`row-${indexrow} `}> 和<td key={`cell-${indexCell}`}>。但是，如果您有任何 cell.id 或 row.id 也可以添加它

【解决方案1】：

我同意更详细地研究密钥。这是我的理解。

如果我理解正确，即使更改了某些行数据，使用 row.id 也不会重新渲染已加载的行。

这不是真的，key的目的是为了标识item位置，所以说到对账（将元素转化为节点），React知道是不是一个节点（纤程）可以重复使用以加快更新过程。

让我们举个例子，如果最初的关键顺序是

  1 2 3

不知何故，在重新订购后，它在新的更新中变成了以下内容

  2 1 3

然后React被引导使用key为1的节点来更新item。该项目已更新，在这种情况下，更新到正确的位置。顺便说一句，React 默认情况下不知道项目的顺序，对于 React，它们看起来都很相似；）

我只是给你一个基本的案例。但是您可以猜测其他情况，例如。缺少一个键，或添加了一个新键。

【讨论】：

"这不是真的，key的目的是为了识别item位置，所以说到对账（将元素转化为节点），React就知道一个节点（纤程）是否可以可重复使用以加快更新过程。”谢谢。这就是我缺少的东西。

【解决方案2】：

键应该始终是唯一的、稳定的（正如上面 Brian 所提到的），并且永远不会在您的代码中被操纵（因此是稳定的）。

首选唯一 ID。我见过人们将整个 user 对象作为键传递。假设有可能重复用户，这也可能是一个巨大的键。

【讨论】：