`Keys`

Question

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

System.out.println(this)

除了列表以外，还有其他提供密钥的帮助吗？

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

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使用 this来标识添加，更改或删除的项目。

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（列表中每个项目的标识符）-如果您没有可使用的任何标识符，则在其中每个项目的 index 可以使用该列表，但不建议使用该列表，因为在项目顺序更改的情况下这可能会引起问题。

Answer 3

只有在列表中使用键时，键才能带来性能上的好处。当列表中的一个值发生更改时，React知道仅更新该值，而不更新整个列表。键是有用的，因为它们有助于在索引更改时跟踪元素（注意：仅将索引用作最后的选择键，因为如果索引更改（即，元素被添加到列表的前/中），React将不得不重新呈现整个列表）。您可以在https://reactjs.org/docs/lists-and-keys.html上了解更多信息。至于不利之处，我将进行有根据的猜测，并说包括一个未在任何地方使用的额外键属性将使您的编译时间变慢，

React：键对于列表以外的其他情况是否有用？

3 个答案:

`Keys`