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

Question

渲染列表时，我可以使用键找到的所有信息都突出显示，例如：<ul>    {array.map((item, index) => <li key={index}>{item}</li>)}</ul>除了列表以外，还有其他情况对提供密钥有帮助吗？仅为页面上的每个非静态元素提供密钥是否有弊端？

Answer 1

一键被推荐的名单中的反应，因为反应使用这种识别被添加，更改或删除的项目。

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（在列表中的每个项目的标识符）是最适合这个目的-如果你没有任何标识，你可以用，一个索引列表中的每个项目都可以使用，但它的不推荐，因为这可能会导致问题如果物品的顺序改变了。