Frontend Lifecycle

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

编辑示例代码，再按挂载、更新、卸载观察受支持 Hook 的 Render、DOM Commit、Browser Paint 与 Effects 时间线。这里识别 API 名称，不执行任意用户代码。

Supported hook matcher

受支持的生命周期代码

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：useLayoutEffect、useEffect。Vue：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。其余语句不会被执行。

react · 更新

执行时间线

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 对应的新副作用。