渲染阶段与 DOM 提交

React 的工作循环有两个主要阶段：渲染阶段和提交阶段。在渲染阶段，React 会调用您的组件函数，并构建用户界面的虚拟表示（Fiber 树）。在提交阶段，React 会将 Fiber 树中的变更应用到真实的 DOM。

在 React 18 并发模式下，渲染阶段可以暂停、中断或重新开始。React 可能会在提交任何内容之前多次调用您的组件函数。这就是组件函数必须保持纯粹的原因——它们不能包含副作用，因为该函数可能会在一次可见更新中运行多次。

与渲染阶段不同，提交阶段始终同步执行，并会一直运行到完成。提交 DOM 变更时，React 无法被中断。这样可以确保 DOM 不会处于只完成部分更新的状态。每次提交后，用户看到的始终是完全一致的用户界面。

提交阶段有三个子阶段：变更前阶段（类组件的 getSnapshotBeforeUpdate 会在此处运行，以便在变更前读取 DOM 值）、变更阶段（React 插入、更新和移除 DOM 节点），以及布局阶段（同步副作用在此处触发，具体包括 useLayoutEffect 和类组件的 componentDidMount/componentDidUpdate）。

useEffect 是一种被动副作用，这意味着它不会在提交阶段运行。提交阶段完成且浏览器完成绘制后，React 会异步调度被动副作用。它们会在浏览器有机会将更新后的 DOM 渲染到屏幕后运行。

浏览器会在布局阶段（运行 useLayoutEffect）和被动副作用阶段（运行 useEffect）之间进行绘制。这是关键的时机差异：useLayoutEffect 在绘制前运行，而 useEffect 在绘制后运行。对于会改变视觉输出的副作用而言，这一差异非常重要。

如果 useEffect 读取 DOM 并更新状态（例如测量元素并设置尺寸状态），React 就会再次渲染并提交。浏览器会绘制两次：第一次使用初始尺寸，第二次使用修正后的尺寸。在修正结果出现之前，用户可能会看到错误尺寸短暂闪现。

React 会在内部构建一棵由“纤程”节点组成的树，每个组件实例对应一个节点。每个纤程都包含组件的状态、副作用和输出。在渲染阶段，React 会创建一棵新的进行中纤程树。在提交阶段，进行中的树会成为当前树，而旧树会被回收再利用。

React 严格模式会在开发环境中有意调用组件函数并执行副作用两次，以帮助发现副作用问题。useLayoutEffect 和 useEffect 都会经历挂载、卸载和再次挂载。这种双重调用不会发生在生产环境中。这样设计是为了暴露副作用未被正确清理时产生的问题。

由于渲染阶段可能被中断并重新运行，组件函数必须在没有副作用的情况下，对相同输入产生相同输出。函数体中的变更、订阅和接口调用（而不是放在副作用中）会在并发模式下执行超出预期的次数，从而导致问题。

切勿直接在组件函数体内读取 DOM 属性。DOM 在服务器渲染时可能尚不存在，或者在重新渲染时可能已经过时。请始终在 useLayoutEffect（用于绘制前读取）或 useEffect（用于绘制后读取）中读取 DOM，因为此时可以确保 DOM 已是最新状态。

在 React 提交阶段的哪个子阶段会触发 useLayoutEffect？

React 的渲染阶段会构建纤程树，并且可能被中断；提交阶段会应用 DOM 变更，并且始终是同步的。提交阶段包含三个子阶段：变更前、变更和布局。useLayoutEffect 会在绘制前的布局阶段触发。useEffect 会在绘制后作为被动副作用触发。