React中Virtual DOM构成及Reconciliation算法相关技术疑问

• Virtual DOM由React元素构成，不管是<Header />这类自定义组件对应的React元素，还是h1、div这类原生HTML标签对应的React元素，本质都是React元素对象。自定义组件会被递归解析展开，最终整个Virtual DOM是一棵包含所有层级React元素的完整树。
• React的Reconciliation算法是分层处理的：
  • 先比较组件层级：如果是同一类型的组件（比如前后都是<Header />），React会保留组件实例，然后递归对比该组件内部的Virtual DOM子树；如果组件类型发生变化，会直接卸载旧组件、挂载新组件。
  • 对于原生HTML对应的React元素（如div、ul），React会比较元素类型、属性，只更新有变化的部分，采用“同层对比”策略，跳过无需更新的子树，不会做无意义的深度遍历。

• 不会直接全量更新renderBody()对应的HTML。当父组件重渲染时，renderBody()会重新执行生成新的JSX（即新的React元素树），React会将这部分新的Virtual DOM和之前的版本做Reconciliation对比，只更新实际发生变化的标签和属性，不会盲目替换整个区块。
• 实际上renderBody()返回的JSX和直接写在组件内的JSX没有区别，都是Virtual DOM的一部分，都会参与Reconciliation的完整流程。

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