React JS 中的渲染和提交阶段到底是什么？虚拟 DOM 实际上有何帮助？

Question

我读过很多关于 React 中渲染和提交阶段的博客。但具体理解不太清楚。他们提到渲染阶段是一个缓慢的过程，而提交阶段不需要时间。

简而言之，渲染是否从根/或状态/属性更改的点开始检查当前虚拟 DOM 与先前的虚拟 DOM？ 提交是将更改放入批次中，该更改将在下一批更新到真实 DOM 中进行吗？

如果我们将渲染视为运行比较算法，

function ReactApp(){
  console.log("rendering...");
  return (...<Child/>....);
}

function Child(){ 
  console.log("rendering child...");
  useEffect(() => {
    console.log("mounting child...");
  })
  return (...);
}

则可以在控制台中看到功能组件 - Will render 和“rendering...”。 提到useEffect（所有componentDidMount，didupdate，willUnmount）将仅在提交阶段运行。

但是，如果该组件有一个子组件，并且当父组件的状态发生变化时，父组件就会呈现。 “正在渲染...”应该在父控制台中可见。 “渲染孩子...”也应该在控制台中可见。 确实如此。 但是，如果状态没有改变，为什么可以在控制台中看到“mounting child...”。

在协调过程中，只有父级的 UI 更新应该进入批处理。 并且 child 只能通过渲染来检查。

这造成了很多单词之间的混淆 - “渲染”、“安装”、“提交”。

此外，我们可以立即看到状态变化的变化，这意味着真正的 DOM 更新得很快吗？ 或者，对于人类来说，感知反应应用程序和非反应应用程序之间的变化的过程要快得多？ 如果虚拟 DOM 概念如此强大，为什么浏览器不内置它呢？

如果某些/所有问题看起来很愚蠢，我们深表歉意。 但我真的很想以一种可以解释 5 年的方式来了解它。 任何指向更简单文档的链接也将不胜感激。