React文档中的变异是什么意思？

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＆amp;列表中的现有项目second不要改变立场。添加第3项后，它们仍然是列表中的第1和第2项。 React识别出这一点并单独留下前两个项目，并添加第一个项目。

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

这就是key重要的原因。

Answer 2

如果您尝试使用渲染数组数据

array.map()

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