React：密钥对列表以外的任何情况都有用吗？按键

Question

我可以找到的所有信息在渲染列表时使用键突出显示，例如：

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

除了列表之外还有哪些情况可以提供密钥？

简单地为页面上的每个非静态元素提供密钥是否有缺点？

Answer 1

您可以使用键来重置组件状态。有关更多信息，请参阅此文章：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

Answer 2

对于react中的列表，建议使用密钥，因为react使用它来标识添加，更改或删除的项目。

Keys

密钥帮助React识别哪些项目已更改，已添加或已删除。应该为数组内部的元素赋予键，以使元素具有稳定的标识。

功能组件的示例：

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')
);

唯一的规则是它必须在其兄弟姐妹中独一无二。

如果您不使用密钥 - 如果您不使用密钥，您将收到警告。

id（列表中每个项目的标识符）最适用于此目的 - 如果您没有可以使用的任何标识符，则可以使用列表中每个项目的索引，但不推荐使用它，因为这可能导致项目顺序发生变化的问题。

Answer 3

密钥仅在列表中使用时提供性能优势。当列表中的一个值发生更改时，React知道只更新该值而不是整个列表。键是有用的，因为它们有助于在索引更改时跟踪元素（注意：仅使用索引作为最后手段的键，因为如果索引更改（即元素添加到列表的前/中），React将不得不重新渲染整个列表）。你可以在这里阅读更多相关信息：https://reactjs.org/docs/lists-and-keys.html。至于缺点，我将采取一个有根据的猜测，并说包括一个没有在任何地方使用的额外的键属性将减慢你的编译时间一个不明显的数量