Frontend Lifecycle

让 React / Vue 生命周期真正“跑起来”

编辑示例代码，再按挂载、更新、卸载逐步观察 Render、DOM Commit、Browser Paint 与 Effects 的先后关系。

Editable example

可编辑代码

function Counter() {
  const [count, setCount] = useState(0)

  useLayoutEffect(() => {
    measureAndAlign()
    return () => stopMeasuring()
  }, [count])

  useEffect(() => {
    document.title = `count: ${count}`
    return () => resetTitle()
  }, [count])

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

当前识别：useLayoutEffect · useEffect

react · update

执行时间线

1 / 8

组件预览计算 count = 1

JavaScript / RendersetCount 触发更新
state 从 0 变为 1，组件重新执行。
JavaScript / Render完成 render
React 对比新旧 element tree，准备最小 DOM 变更。
Effects / Hooks旧 useLayoutEffect cleanup
提交阶段先清理上一次布局副作用。
DOM Commit提交 DOM 更新
按钮文本已经从 0 改成 1，但屏幕尚未刷新。
Effects / Hooks新 useLayoutEffect setup
在绘制前读取或同步修改布局，因此不会让用户看到中间状态。
Browser Paint浏览器绘制
用户现在看到 count = 1。
Effects / Hooks旧 useEffect cleanup
绘制后清理上一次被动副作用。
Effects / Hooks新 useEffect setup
再启动与 count = 1 对应的副作用。