虚拟 DOM 是如何更新的？

Question

想象一下，您使用 ReactJs 构建了一个包含一百个元素的应用程序。假设在某个时间，组件 A 的状态发生了变化，为了简单起见，我们假设它只有一个元素，没有子组件。

我的问题是：Virtual DOM 如何更新以响应状态变化？

经过几个小时的研究，我发现了两个相互矛盾的观点：

• 整个 Virtual DOM 被拆除；然后从头开始重建
• 在虚拟 DOM 中仅更新更改的元素。

不幸的是，官方文档对此并不清楚。所以，有人能给出正确的答案吗？ （请提供支持参考）

Answer 1

[编辑]：这里有些部分不完整，考虑阅读评论部分！

---

当组件的状态或属性发生变化时，React 会更新它。它会在之前的 JSX 和新的 JSX 之间进行比较，并仅重新渲染差异。

如果父组件的 state 或 prop 发生了变化，它将被更新。 除非传递给它的父级的道具发生更改，否则子级将不会刷新。

请注意，来自孩子的 useEffect 首先被触发。知道了，如果你在子组件中做了更新状态的事情，那么它每次都会被重新渲染（因为如果你没有设置任何依赖项，则每次都会触发usEffect）。

Test from Stackblitz - Child Effect is triggered first

Article that made me notice it (I didn't know before this answer :D)

以下是我对 React 的理解。简而言之，整个虚拟 DOM 不是从头开始重建的，这不是 JSX 比较的工作方式。

我没有太多关于我所说内容的来源，但这里是来自官方文档的 the explanation about jsx update。这应该足以消除列表中的第一点。