React 文档中的突变是什么意思？答案

【问题标题】：What's the meaning of mutation in React Documentation?React 文档中的突变是什么意思？
【发布时间】：2018-02-13 12:56:26
【问题描述】：

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React 会匹配两个 first 树，匹配两个 second 树，然后然后插入第三个树。

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React 会改变每个孩子，而不是意识到它可以保持 Duke 和 Villanova 子树完好无损。这效率低下可能是个问题。

我很难理解“React 会改变每个孩子”这句话的意思。

【问题讨论】：

像“改变”一样变异。
这是否意味着每次从第二棵树中找到新的子元素时，他们都会创建一棵全新的树？
文档只是说当您保留顺序时，协调算法可以在最后一个孩子之后快速插入或删除一个孩子（因此更快的 DOM 更新）。但是如果你不保留顺序并从头开始插入，那么 React 必须遍历每个新的子节点并将它们重新插入到更新的 DOM 中。
哦，现在我明白了。在第二种情况下，它必须遍历每个元素并将其添加到新树中，因为它没有添加到列表的末尾。谢谢你的解释！
请注意，React 提供了密钥来调解这一点。 Keys 允许 React 知道插入了哪个，而不必重新插入每个孩子，因为它没有。

【解决方案1】：

在您的第一个示例中，first 和 second 列表中的现有项目不会改变位置。添加第 3 项时，它们仍然是列表中的第 1 项和第 2 项。 React 识别出这一点，只留下前两项，并添加第一项。

在第二个示例中，Duke 和 Villanova 将位置从第 1 和第 2 更改为分别为第 2 和第 3。 React 并不知道你刚开始添加了一个项目。它认为所有 3 个项目都是新的，因此删除所有 3 个项目，并重新渲染它们。如果您的清单很长，这可能既昂贵又耗时。

这就是为什么独特的keys 很重要。

【讨论】：

【解决方案2】：

如果您尝试使用

来呈现数组数据

array.map()

您会注意到 react 会要求您为数组的每个元素提供一个键。 react 所做的是跟踪属于父级的数据的每个成员，这样当您删除或添加更多数据时，react 知道如何有效地进行调整。否则，您的数据更改将被视为突变并呈现为新数据集，这可能是一个问题，尤其是随着您的数据增长。

【讨论】：