列表中 React 元素的最佳键是什么? [英] What is the best key for a React element in a list?

问题描述

想象一下我有这个对象数组

Imagine I have this array of objects

fullList = [
  {label: "item A", id="itemA", someBool: true}, 
  {label: "item B", id="itemB", someBool: true}, 
  {label: "item C", id="itemC", someBool: true}, 
  {label: "item D", id="itemD", someBool: false}, 
  {label: "item E", id="itemE", someBool: false},
];

但我没有在屏幕上呈现完整列表.我正在根据一些过滤器值对其进行过滤，并呈现一个过滤后的列表.

But I'm not rendering the full list on the screen. I'm filtering it based on some filter values and I'm rendering a filtered list.

用户与过滤器交互，并会根据他/她选择的过滤器看到不同的过滤列表.

The user interacts with the filters and will see different filtered lists based on what he/she choses as selected filters.

然后我有两个键选项:

const filteredList = fullList.filter((item) => item.someBool === true);

const filteredListItems = filteredList.map((item,index) => 
  <Item_UI_Component
    key={item.id}          // OPTION #1 - THIS IS ONLY POSSIBLE IF THE FULL LIST CONTAINS id's
    key={index}            // OPTION #2 - THIS IS ALWAYS POSSIBLE
    ...SOME OTHER PROPS
  />
);

问题

这两种方法之间的实际区别是什么?我是否会因其中任何一个而获得或失去某些东西?如果我在选项 #1 中给元素一个普遍唯一的键，React 会优化一些东西吗?或者它在两种情况下的行为都一样吗?

What is the practical difference between the two approachs? Do I gain or lose something with either one of them? Does React optimize something if I give the elements a UNIVERSALLY unique key as in OPTION #1? Or will it behave the same in both situations?

选项 1:

• 无论如何，密钥都是唯一的 ID
• 相同的元素在每次渲染时总是获得相同的 ID

选项 2:

• 该键在 filteredList 上始终是唯一的，但相同的元素可能会使用与上一次渲染中的键不同的键重新渲染.

• The key is always unique on the filteredList, but the same element may be re-rendered with a different key than the one from the previous render.

注意:如果你没有设置任何键，你会收到警告:

Note: If you don't set any key, you'll get the warning:

警告:列表中的每个子项都应该有一个唯一的键"属性.请参阅 https://reactjs.org/docs/lists-and-keys.html#keys 了解更多信息.

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/docs/lists-and-keys.html#keys for more information.

推荐答案

来自官方文档:

https://reactjs.org/docs/lists-and-keys.html

当您没有用于呈现项目的稳定 ID 时，您可以将项目索引用作键作为最后的手段.如果项目的顺序可能发生变化，我们不建议对键使用索引.这会对性能产生负面影响，并可能导致组件状态出现问题.

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

正如我在评论中所说:

原因是因为如果您的过滤器发生变化，并且现在位于索引 2 的项目与曾经位于索引 2 的项目不同，那么 React 会变得混乱而不是渲染的风险非常大一个新的组件，它只会改变它发送组件的道具——它可能根本不会在视觉上更新，这取决于你是如何编码的.

The reason is because if your filter changes, and the item that is now at index 2 is not the same as the item that used to be at index 2, there's a very real risk that React will get confused and rather than rendering a new Component there, it will just change the props it sends the component -- and it may not visually update at all depending on how you've coded it.

我个人之前使用索引作为键肯定有问题

I've definitely had issues by using index as key before personally

这篇关于列表中 React 元素的最佳键是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！