Virtual DOM 是如何更新的？答案

【问题标题】：How is Virtual DOM updated?Virtual DOM 是如何更新的？
【发布时间】：2021-05-04 03:00:20
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

当组件的 state 或 prop 发生变化时，React 会更新组件。它在旧 JSX 和新 JSX 之间进行比较，并仅重新呈现差异。

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

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

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

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

【讨论】：

那么您如何解释 Dan Abramov 的这个答案：重建 React 树...对于性能来说并没有更好，但通常对大多数人来说已经足够了...（请阅读他也在回答的问题）参考：twitter.com/dan_abramov/status/998329007119785985
@Hans 看来我的回答错了。我误解了 It just replace what has changed 是关于真实 DOM 的事实。虚拟的（或他所说的 React 组件树）被完全重建。我还说了一些关于useEffect 的奇怪的东西。我以为只有useEffect被触发，而不是render方法，我猜这也是错误的。它被触发，这更有意义，但如果重建的部分与之前的虚拟 DOM 中的相同，那么它在视图（真实 DOM）中不会发生变化。
@HansI 再次检查了我在答案中链接的文档，它谈论的是 DOM，而不是 virtual DOM。这两个 DOM 误导了我，现在要小心了！谢谢，我今天学到了一些东西:)