React.js：更新动态子组件的工作原理是什么？

Question

在React组件包含动态子组件的情况下，比如说包含n个项目的列表组件，React如何确定何时更新特定的子组件？例如，如果我重新排序列表或将其替换为具有共同元素的另一个列表，我可以通过阻止重新呈现这些重用元素来优化性能吗？或者React已经很好地优化了重新渲染，这样就没有意义了吗？

Answer 1

这就是React的虚拟DOM发挥作用的地方。

当你在React中渲染东西时，它会构建一个常规元素的大型Javascript树。当状态改变并触发重新渲染时，渲染功能执行其对齐。它试图通过比较它们的类型，属性和子项来确定是否可以重用任何元素。

例如：

<span id="A">Hello!</span>

React知道这个节点：    - 类型为span    - 具有单个属性，id为“A”    - 有一个儿童文本节点，由字符串“Hello！”

组成

当触发重新渲染时，它会检查孩子是否匹配。如果它具有相同的类型，属性集和子集，则它知道它可以跳过渲染到DOM。

动态列表 该策略的问题在于它没有考虑重新排序。例如：

<span id="B"></span>
<span id="C"></span>

如果在下一个渲染中，它会看到：

<span id="A"></span>
<span id="B"></span>
<span id="C"></span>

我们所做的只是添加1个新项目，但因为我们将它添加到列表顶部，它将B与A进行比较，将C与B进行比较。它无法重复使用预先存在的B和C组件并重新使用 - 一切都好。值得庆幸的是，这个问题有一个解决方案。

通过给项目一个'key'，React知道比较相同键的项目：

<span id="B" key="1"></span>
<span id="C" key="2"></span>

即使订单发生变化

<span id="A" key="3"></span>
<span id="B" key="1"></span>
<span id="C" key="2"></span>

React知道比较1比1和2比2.它只增加1个新节点，并且只留下B和C.

进一步阅读 React对此主题有fantastic documentation