React Hooks · 更新

阶段顺序

1. 1
   setCount 触发更新

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

2. 2
   完成 render

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

3. 3
   旧 useLayoutEffect cleanup

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

4. 4
   提交 DOM 更新

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

5. 5
   新 useLayoutEffect setup

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

6. 6
   浏览器绘制

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

7. 7
   旧 useEffect cleanup

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

8. 8
   新 useEffect setup

   观察这一阶段发生在 JavaScript、DOM Commit、Browser Paint 或副作用中的哪一层。

判断重点

• 区分 render 计算与 DOM 提交。
• 区分绘制前的同步 Hook 与绘制后的被动副作用。
• 清理函数与下一次 setup 或组件移除的先后顺序必须明确。