useEffect于useLayoutEffect

`useEffect` 和 `useLayoutEffect` 都是 React 中的副作用钩子，但它们的主要区别在于执行时间点的不同以及对布局更新的影响：

**useEffect (标准效应)：**
- 主要用于执行 DOM 更新后的副作用，比如数据绑定、订阅事件等。
- 会在函数组件的一般渲染周期（包括初始渲染和状态更新后的渲染）之后执行。
- 可能受到 React 渲染阶段的影响，如果在 render 函数中直接修改了 state 或 props，它会在下次渲染前（通常是在浏览器完成重新布局之前）运行。

**useLayoutEffect (布局效应)：**
- 保证在浏览器完成一次布局（layout pass）之后立即执行，通常发生在 render 函数开始之前。
- 由于执行时间更早，它更适合那些需要在元素位置确定后才能执行的操作，比如测量元素尺寸、计算样式改变后的滚动位置等。
- 它不会触发额外的渲染，因此不应该在里面修改 state 或者引发重新渲染。