列表中的React元素的最佳键是什么?

想象一下我有这么多东西

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},
];

但我不会在屏幕上显示完整的列表。我根据一些过滤值过滤它,并呈现一个过滤列表。

用户与过滤器交互,并将根据他/她选择的过滤器看到不同的过滤列表。

那我有了 按键有两个选项:

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会优化什么吗?或者在这两种情况下它的行为都一样吗?

选项1:

• 关键是一个唯一的ID,不管是什么
• 相同的元素在每个渲染上总是得到相同的ID

选项2:

• 钥匙总是独一无二的 filteredList ,但同一元素可以使用不同于上次渲染的键重新渲染。

注: 如果不设置任何键,将收到警告:

警告: 列表中的每个子项都应具有唯一的“键”属性。见 https://reactjs.org/docs/lists-and-keys.html#keys 更多信息。