请阐述 React 中 useEffect 与 useLayoutEffect 之间的差异，包括它们的执行时机、对页面渲染的影响以及各自的适用场景。

回答思路

1. 【回答框架 1】useEffect 在浏览器完成绘制后异步执行，不会阻塞屏幕更新；useLayoutEffect 在 DOM 变更后、浏览器绘制前同步执行，会阻塞渲染。
2. 【回答框架 2】执行时机差异源于两者底层调度不同：useEffect 使用异步调度，useLayoutEffect 使用同步调度。因此 useLayoutEffect 内读取布局或测量 DOM 可拿到最新值，但可能造成性能问题。
3. 【回答框架 3】适用场景：useEffect 适合非紧急副作用，如网络请求、订阅、日志等；useLayoutEffect 适合需要同步读取布局的操，如测量 DOM、调整样式或避免闪烁。
4. 【回答框架 4】useLayoutEffect 在服务端渲染时会警告，建议仅在客户端使用；若不确定，优先用 useEffect。
5. 【回答框架 5】在 React 18 并发模式下，useEffect 可能被并发中断，而 useLayoutEffect 不会，但两者都应尽量保持轻量。
6. 【关键点 1】useEffect 异步执行，在绘制后触发；useLayoutEffect 同步执行，在绘制前触发。
7. 【关键点 2】useLayoutEffect 会阻塞浏览器渲染，应避免在其中执行耗时操作。
8. 【关键点 3】需要读取布局或同步更新样式时用 useLayoutEffect，其他情况用 useEffect。
9. 【关键点 4】服务端渲染环境中不推荐使用 useLayoutEffect，React 会给出警告。
10. 【关键点 5】两者都是副作用钩子，但 useLayoutEffect 更接近 componentDidMount 和 componentDidUpdate 的行为。
11. 【易错点 1】不要盲目用 useLayoutEffect 替代 useEffect，可能导致性能下降。
12. 【易错点 2】在 useLayoutEffect 中执行异步操作或长时间计算会阻塞渲染，应避免。
13. 【易错点 3】服务端渲染时使用 useLayoutEffect 会警告，可考虑使用 useEffect 替代。