反应键如何工作答案

【问题标题】：How does react key works反应键如何工作
【发布时间】：2021-04-06 12:38:03
【问题描述】：

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

我从事俄罗斯方块项目，每秒钟，具有 20 * 24 单元格的矩阵重新渲染和移动 tetromino。数组的每个单元格都包含字母表，它成为分区的className，并决定单元格的颜色，并且在四联体移动的每一秒，它都运行良好。

从他的文章示例和this question 来看，如果 key 没有改变，react 不会改变那个 DOM 元素并为数组中的新项目添加新的 DOM。所以我的俄罗斯方块阶段不应该更新视图，因为键不会改变。我很困惑反应键是如何工作的。

我搜索了很多文章，但我只能找到它们用于优化和比较 DOM，而不是如何。所以我想知道，key是如何工作的，以及他们在改变Virtual Dom之前和改变Virtual DOM之后做了什么样的程序来比较

【问题讨论】：

【解决方案1】：

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

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

通过正确设置键属性，react 能够检测插入或更改了哪个项目，并且仅重新呈现列表的这一部分。您可以在 Recursing On Children 和 Keys 的 React 文档中找到详细的示例和说明。

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

使用基于索引的键可以正常工作，但在性能方面，在动态列表以较低索引更新的情况下效率不高。

【讨论】：

【解决方案2】：

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

【讨论】：