Javascript 反应：除了列表之外，键是否对任何情况都有用？

渲染列表时，我可以使用关键点突出显示所有信息，例如：

<ul>
    {array.map((item, index) => <li key={index}>{item}</li>)}
</ul>

{array.map（（item，index）=>
{item}
）}

除了列表之外，是否存在提供密钥也有帮助的情况

---

简单地为页面上的每个非静态元素提供键有缺点吗？

键仅在列表中使用时提供性能优势。当列表中的一个值发生更改时，React只更新该值，而不更新整个列表。关键点很有用，因为它们有助于在索引更改时跟踪元素（注意：仅将索引用作最后手段的关键点，因为如果索引更改（即元素添加到列表的前面/中间），则必须重新呈现整个列表）。您可以在此处阅读更多信息：。至于缺点，我将进行一个有根据的猜测，并说包括一个不在任何地方使用的额外键属性将降低编译时间，这是一个不明显的量，您可以使用键重置组件状态。有关更多信息，请参阅本文：

对于react中的列表，建议使用键，，因为react使用该键来标识添加、更改或删除的项目

键有助于识别哪些项已更改、已添加或已删除 远离的。应该为数组中的元素提供键，以便 这些元素具有稳定的特性

具有功能组件的示例：

功能组件（道具）{
const list=props.list；
const items=list.map（（item）=>

{item}

);
返回(
{items}
);
}
常量数组=[1,2,3,4,5]；
ReactDOM.render(
,
document.getElementById（'root'））
);

唯一的规则是，它必须是唯一的兄弟姐妹

如果你不使用钥匙-如果你不使用钥匙，你会得到警告

id

（列表中每个项目的标识符）最适合用于此目的-如果您没有任何可使用的标识符，则可以使用列表中每个项目的索引，但不建议这样做，因为在项目顺序发生变化的情况下，这可能会导致问题

function MyListComponent (props) {
  const list = props.list;
  const items= list.map((item) =>
    <li key={item.toString()}>
      {item}
    </li>
  );
  return (
    <ul>{items}</ul>
  );
}

const array = [1, 2, 3, 4, 5];
ReactDOM.render(
  <MyListComponent list={array} />,
  document.getElementById('root')
);