Question

{this.props.results.map(video => {
      return (
        <SearchVideoMeta
          key={video.id}
          id={video.id}
          thumbnail={video.thumbnail}
          title={video.title}
          description={video.description}
        />
      );
    })}

看看上面的代码片段。呈现SearchVideoMeta组件后，如果结果状态已更新，则将卸载SearchVideoMeta组件，然后将其装入并以新的结果状态再次装入。但是，如果删除了键属性（这是唯一键）并更新了结果状态，则SearchVideoMeta组件将更新为新的结果状态（无需再次卸载和安装）。我想知道哪种方法更有效。 React文档说添加密钥总是更好。

P.S：我是新来的反应者，尝试在反应文档中找到它，但是没有帮助。

Answer 1

添加您自己的密钥，并确保该密钥不是索引，而是诸如ID之类的唯一东西，当然更好。

让我们想象一下，您有很多人，并且正在以ul呈现此列表，每个人都有自己的li。现在，您将索引用作每个li的键。例如，当您删除列表中的第一个人时，列表中的所有内容都会上移一个，结果，即使实际数据没有更改，键也会更改，当然，对于已删除的一项除外。反过来，这将导致所有未更改的lis重新渲染，即使它们完全相同。

另一方面，如果您使用ID作为密钥，那么无论您要删除列表中的哪个项目，react都会知道哪个项目是相同的，哪些不是，因此只能重新渲染需要重新呈现的内容。

当您根本不提供密钥时，react会将索引用作您的密钥，这意味着您可能会遇到我们刚刚讨论的这个瓶颈。

关于卸载的问题，我不能肯定地说卸载和重新安装的成本是多少，但是作为一个有根据的猜测，仅卸载和重新安装实际更改的内容与重新渲染整个内容相比，效率更高列出所有未更改的项目。

为使这个主题更加清晰，我强烈建议您检查一下video。

组件更新与组件卸载反应性能

1 个答案: