React 文档中的 mutation 是什么意思？

Question

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

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

React will match the two first trees, match the two second trees, and then insert the third tree.

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

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

React will mutate every child instead of realizing it can keep the Duke and Villanova subtrees intact. This inefficiency can be a problem.

我很难理解短语 "React will mutate every child" 的意思。

Answer 1

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

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

这就是独特的 key 很重要的原因。

Answer 2

如果您尝试使用

渲染数组数据

array.map()

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

What's the meaning of mutation in React Documentation?