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

Question

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

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

React 将匹配第一棵树，匹配第二棵树，然后插入第三棵树。

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

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

React 会改变每个子树，而不是意识到它可以保持 Duke和Villanova子树的完整。这种低效率可能是一个问题。

我很难理解他们所说的“React 会改变每个孩子”的意思。

这可以从他们的网站上找到：https : //reactjs.org/docs/reconciliation.html#recursing-on-children

Answer 1

在你的第一个例子，在列表中的现有项目first和second不改变位置。添加第 3 项时，它们仍为列表中的第 1 项和第 2 项。React 识别出这一点并保留前两个项目，并添加第一个。

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

这就是为什么 uniquekey很重要。