0

我读了这篇关于“为什么使用索引作为键是一种反模式”的文章，并且很好奇为什么我的项目在使用基于索引的键矩阵时效果如此之好。

我从事俄罗斯方块项目，每秒钟，具有 20 * 24 单元格的矩阵重新渲染和移动 tetromino。数组的每个单元格都包含字母表，它成为部门的 className 并决定单元格的颜色，并且当 tetromino 移动的每一秒，它都工作得很好。

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

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

4

2 回答 2

1

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

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

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

如果你使用浏览器扩展“React Dev Tools” ，你可以检查这个效果。激活扩展后，您可以执行以下操作：

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

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

于 2021-04-06T13:24:47.983 回答
0

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

看看这个：为什么键在 React 中很重要

于 2021-04-06T13:08:12.180 回答