Question

这是来自Facebook文档：

当重新呈现列表时，React会获取新版本中的每个元素   并在上一个列表中查找具有匹配键的一个。当一把钥匙   添加到集合中，创建一个组件;当一个键被删除时，a   组件被破坏。密钥告诉React每个人的身份   组件，以便它可以维持重新渲染的状态。如果你   更改组件的键，它将被彻底销毁   用新状态重新创建。

强烈建议您随时分配正确的密钥   构建动态列表。如果您没有合适的钥匙，那么您   可能会考虑重组您的数据，以便您这样做。

如果您没有指定任何密钥，React会发出警告并退回   使用数组索引作为键 - 如果不是正确的选择   你有没有重新排序列表中的元素或添加/删除项目，但   列表的底部。显式传递密钥= {i}沉默了   警告，但有相同的问题，因此在大多数情况下不建议使用。

组件键不需要全局唯一，只需要唯一的相对   直接兄弟姐妹。

我不明白。如果我们不在这样的列表中提供密钥：

return (
        <li>
          <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
        </li>
      );

有什么问题？如果列表中包含3个元素且密钥为[0,1,2]而我们删除了1，会发生什么情况？

Answer 1

每个列表都需要一个密钥才能使用React;像<li key={item.uniqueId}>一样，uniqueId的{{1}}在项目组中是唯一的。因此，当您修改此列表时，React知道如何处理修改。此键与列表中单个项目的索引/定位不同。

当您使用地图创建列表时，您将执行以下操作：

item

在您上面发布的文档中，您可以使用该项目的索引（即return ( <ul> {this.props.items.map(item => <ItemComponent key={item.id} {...item} />)} </ul> )），但不建议这样做。

在(index, i) => <ItemComponent key={i}列表组件中：

ItemComponent

或者使用你的例子，你可以这样做：

return (
  <li>
    {/* your code here */}
  </li>
)

每当您移动，删除或添加项目到此列表时，React将知道如何呈现它。

动态列表中的反应键

1 个答案: