在开发React项目时，根据规格，列表和表类型的每个元素都需要指定属性，否则会发生警告错误。如ANT设计的表组件文档所述，未知错误可能会发生。
我们需要为每个数据提供一个属性。在实际项目中，一般数据是从背景中获得的，因此我们可以将唯一标识用作值。但是，如果数据没有属性，则不建议使用索引AS。。不建议使用它。本文将讨论不建议的原因，主要分为2分。
关键。如果您选择不分配明确的键来列出项目，则react将默认为键为键。
在讨论绩效问题之前，让我们看一个案例。
在这种情况下，我们使用函数来生成多个标签，并用索引串成每个标签的值。单击按钮单击时，将删除数据中的第一个项目以触发recrendering。
从屏幕截图可以看出它确实可以达到我们想要的效果，但是如果我们仔细研究了React的实际渲染，我们会发现效率不高。
我们知道，React更新机制是首先比较虚拟DOM，然后计算差异，然后操作真实的DOM。
如上面的代码所示，更新之前和之后，索引仍然是从0开始的。反应一一比较两个相同的标签，然后递归内部。执行真实的DOM操作，将内部文本更改为SAM，并且目前完成此数据的更新。然后继续比较，数据和更新。最后，原始标签不再存在于新的虚拟DOM中，因此执行了DOM。
如果我们使用数据，所有内容都不同。回答从一开始就发现了数据，并且将被删除。在比较后，其他三个数据会发现不变，因此不会进行真正的DOM更新。
同样，在这种情况下，我们要删除第一个数据以触发页面上的元素更改。如果我们将索引用作用途，它将导致所有真实的DOM；如果我们使用它，它可以确保更新最低成本和更高的效率。
如果这只是一个效率问题，则可能不是我们首先解决它，但是如果更新是错误的，那么我们就不能忽略它。将在此处列出两个示例以说明问题。
类似于前面的情况，但是在遍历数据时，这次我们添加了输入框的渲染。测试情况时，我们首先在每个输入框中输入它们的内容，然后单击按钮以删除第一个项目。
可以发现，第一个TOM确实已被删除，但是标签中的输入值仍然1。
原因也很容易理解。正如先前的示例一样，尽管似乎已经删除了第一项，但实际上，当计算反应时，最终删除实际上是最后一项。这似乎是删除React Recursion之间比较差异的第一个原因，然后更新文本内容。从结果来看，我们还可以发现在之前和之后比较了标签，并且认为它没有更改，因此输入值仍然保留了我们在更新之前输入的内容。标签被删除，因此该标签同时被删除。
有时，我们会在网页上制作一些标签，类似于翻译，主题识别等需求。当数据修改涉及数据修改时，使用索引被用作容易发生的问题。
在上述情况下，我们在第一个项目中标记了M，以增加标签包裹的形式。目前，将删除第一项以查找严重的更新错误。
我们可以发现第一项未删除，但第二个项目已删除。
我们知道，当React更新时，它将首先比较虚拟DOM，然后计算如何更新，然后将更新过程映射到真实的DOM操作中，最后完成更新。标记行为是直接通过修改DOM来直接操作的。这个案例。React不知道发生了变化。因此，当计算虚拟DOM的更改时，仍然可以使用它。发生更新时，预期的操作是将隐藏的节点替换为SAM。但是，在标记后，该节点被破坏并变成2个节点。无法找到tom节点无法完成预期的tom节点更新操作。
如果要解决此类问题，则可以尝试删除标签。目前，由于标签只是一个孩子节点tom，因此React可以直接修改Update..或保持标签，但在Tom的外层中添加标签。目前，当React更新时，将修改第一个标签，即已更新标签。
当然，最好避免使用索引AS！
同样，在这两种情况下，由于存在的存在，更新的元素没有被判断为更改，例如，或不可预测的修改元素已与虚拟DOM不再匹配。不满足期望。
如果读者感兴趣，您可以深入了解React扩散算法。
本文中使用的代码可以在我的仓库中找到：gitee
原始：https：//juejin.cn/post/709974592741366797