React 18中useEffect钩子是否与组件渲染同属一个浏览器渲染周期？

核心结论 #

在React 18中，useEffect不会和组件渲染运行在同一个浏览器渲染周期，它会被延迟到浏览器完成当前DOM更新与UI绘制之后，在后续的微任务队列中执行。因此，React不保证渲染与对应的useEffect是原子性执行的——渲染完成后、useEffect执行前，浏览器可能会处理其他任务（比如其他组件的后续渲染、全局事件回调等）。

针对你的编辑器自动聚焦场景 #

你担心的“编辑器渲染完成但useEffect执行前，其他组件夺走焦点”的情况确实可能发生。如果要确保编辑器能稳定拿到焦点，useEffect不是最优选择，推荐使用useLayoutEffect代替：

useLayoutEffect的执行时机是在DOM更新完成后、浏览器开始绘制UI之前，属于同步执行的逻辑。这时候设置焦点，浏览器还未完成UI渲染，能确保焦点被编辑器优先获取，不会被同一周期内的其他操作打断。

示例代码：

import { useLayoutEffect, useRef } from 'react';

function Editor({ autofocus }) {
  const editorRef = useRef(null);

  useLayoutEffect(() => {
    if (autofocus && editorRef.current) {
      editorRef.current.focus();
    }
  }, [autofocus]);

  return <textarea ref={editorRef} />;
}

补充说明 #

• useEffect适合处理那些不依赖DOM立即更新的副作用（比如数据请求、订阅），它不会阻塞浏览器渲染，对性能更友好。
• useLayoutEffect会阻塞浏览器绘制，所以只在需要同步处理DOM操作的场景下使用，避免滥用影响页面性能。

内容的提问来源于stack exchange，提问作者akonsu