reactjs - Virtual DOM 是如何更新的？

Question

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

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

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

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

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

标签： reactjsvirtual-dom

Answer 1

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

---

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

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

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

来自 Stackblitz 的测试 - 首先触发儿童效应

让我注意到它的文章（在这个答案之前我不知道：D）

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

我没有太多关于我所说的资料，但这里是官方文档中关于 jsx 更新的解释。这应该足以消除您列表中的第一点。