从数组中渲染项目时正确选择 React 键
Properly choosing React keys while rendering items from array
我最近一直在研究 React 中元素键的重要性，但我对此仍然有些困惑。
我遇到过这种情况，其中数据网格组件负责按行显示数据。实现了排序、过滤和分页。我从 api.
获取行数据
问题是：
如何正确选择地图功能元素（行）的键？
问题是已经获取的行数据可以在刷新之间改变（通过被其他用户编辑）。
我应该为关键属性（例如 nanoid）使用唯一 ID 还是使用 row.id？
如果我理解正确，使用 row.id 将不会导致已加载行的行重新呈现，即使更改了某些行数据也是如此。
另一方面，使用唯一 ID（如 nanoid）会对排序、过滤等操作的性能产生负面影响...？
我做对了吗，然后如何正确地做到这一点？
键应该始终是唯一的、稳定的（正如 Brian 上面提到的），并且永远不会在您的代码中进行操作（因此是稳定的）。
首选唯一 ID。我见过人们传递整个 user 对象作为键。假设有 可能 重复用户，这也可能是一个 巨大的 键。
我同意更详细地研究密钥。这是我的理解。
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
这不是真的，key的作用是识别item位置，所以在reconciliation的时候（将元素转换成节点），React知道是否可以重复使用一个节点（光纤）来加快更新过程。
让我们举个例子，如果最初的键顺序是
1 2 3
不知何故重新排序后，在新的更新中变成了以下
2 1 3
然后React被引导使用key为1的节点更新item。该项目已更新，在本例中，更新到正确的位置。顺便说一句，React 默认情况下不知道项目的顺序，对于 React，它们看起来都很相似 ;)
我只是给你一个基本的案例。但是您可以猜测其他情况，例如。缺少一把钥匙，或添加了一把新钥匙。
我最近一直在研究 React 中元素键的重要性，但我对此仍然有些困惑。
我遇到过这种情况，其中数据网格组件负责按行显示数据。实现了排序、过滤和分页。我从 api.
获取行数据问题是： 如何正确选择地图功能元素（行）的键？
问题是已经获取的行数据可以在刷新之间改变（通过被其他用户编辑）。
我应该为关键属性（例如 nanoid）使用唯一 ID 还是使用 row.id？
如果我理解正确，使用 row.id 将不会导致已加载行的行重新呈现，即使更改了某些行数据也是如此。 另一方面，使用唯一 ID（如 nanoid）会对排序、过滤等操作的性能产生负面影响...？
我做对了吗，然后如何正确地做到这一点？
键应该始终是唯一的、稳定的（正如 Brian 上面提到的），并且永远不会在您的代码中进行操作（因此是稳定的）。
首选唯一 ID。我见过人们传递整个 user 对象作为键。假设有 可能 重复用户，这也可能是一个 巨大的 键。
我同意更详细地研究密钥。这是我的理解。
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
这不是真的，key的作用是识别item位置，所以在reconciliation的时候（将元素转换成节点），React知道是否可以重复使用一个节点（光纤）来加快更新过程。
让我们举个例子，如果最初的键顺序是
1 2 3
不知何故重新排序后，在新的更新中变成了以下
2 1 3
然后React被引导使用key为1的节点更新item。该项目已更新，在本例中，更新到正确的位置。顺便说一句，React 默认情况下不知道项目的顺序，对于 React，它们看起来都很相似 ;)
我只是给你一个基本的案例。但是您可以猜测其他情况，例如。缺少一把钥匙，或添加了一把新钥匙。