反应键如何工作

Question

我读了这篇关于 'why using index as a key is an anti pattern' 的文章，很好奇为什么我的项目使用基于索引的键矩阵效果如此好。

我从事俄罗斯方块项目，每一秒，20 * 24 个单元格的矩阵都会重新渲染并移动俄罗斯方块。数组的每个单元格都包含字母表，它成为部门的类名，并决定单元格的颜色和四联骨牌移动时的每一秒，它工作得很好。

从他的文章的例子和 ，如果键没有改变，反应不会改变那个 DOM 元素并为新项目添加新的 DOM大批。所以我的俄罗斯方块阶段不应该更新视图，因为密钥没有改变。我很困惑反应键是如何工作的。

我搜索了很多文章，但我只能找到它们用于优化和比较DOM，而不是如何。所以我想知道，关键是如何工作的，以及他们在更改 Virtual Dom 之前和更改 Virtual DOM

之后做了什么样的程序来比较

Answer 1

键就像项目的 ID，使用索引是一种不好的做法，因为如果其中一个项目改变了他在列表中的位置，所有列表都会重新呈现，您可能会发现它不会影响您的情况性能这么多，但我认为这是一个坏习惯。

看看这个：Why Are Keys Important In React

Answer 2

不使用 'key' 属性时，如果更改或插入了列表开头的项目，在比较列表时，它自己的反应不是很有效。

如果您在列表的开头插入一个元素，React 将重新呈现整个列表，而不仅仅是添加插入的项目（如果您没有设置键属性）。 如果您使用基于索引的键，同样适用，因为所有项目的键都会在插入时发生变化，因此整个列表将重新呈现。

通过正确设置键属性，React 能够检测到插入或更改了哪个项目，并且仅重新呈现列表的这一部分。 您可以在 Recursing On Children and Keys.

的 React 文档中找到详细的示例和解释

如果您使用浏览器扩展"React Dev Tools"，您可以检查这个效果。启用扩展程序后，您可以执行以下操作：

1. 打开浏览器开发者工具
2. 进入“组件”选项卡
3. 转到选项卡设置（齿轮图标）
4. 切换“组件呈现时突出显示更新”。
5. 尝试在没有键的列表开头插入一个项目，然后再次插入一个使用唯一键的列表，检查哪些组件更新

使用基于索引的键可以很好地工作，但是在性能方面它在动态列表以较低索引更新的情况下不是很有效。