React状态更新时如何重建Virtual DOM树？组件D更新的渲染疑问

当组件D的状态更新时，React不会生成完整的新元素树，而是只从D这个节点开始，递归生成它自身以及所有子组件对应的新React元素（也就是虚拟DOM的局部分支）。

具体过程可以拆解为：

• 组件D的状态变化触发自身重新渲染，生成D对应的新React元素；
• 接着React会遍历D的所有子组件（如果存在），调用它们的渲染逻辑生成对应新元素；
• 对于组件树中D的父组件、兄弟组件以及其他无关分支，React不会调用它们的渲染函数，自然也不会生成这些部分的新虚拟DOM。

之所以会有“对比完整树”的错觉，是因为Diffing算法确实会对比新旧分支，但这里的“新树”本质是以更新节点为根的局部分支，而非整个组件树的全量更新。React只会把这个局部新分支和旧树中对应的分支做对比，仅更新真实DOM中需要变化的部分。

另外要注意：如果没有做memo、useMemo这类性能优化，D的所有子组件都会跟着重新渲染生成新虚拟DOM，但父组件和其他无关组件完全不会被触及。

内容的提问来源于stack exchange，提问作者Ranjit Budhathoki