React 中 useEffect 的依赖数组为空（[]）时，其行为与 componentDidMount 有何异同？

React 中 useEffect 的依赖数组为空（[]）时，其行为与 componentDidMount 有何异同？

回答与解析：

当 useEffect 的依赖数组为空（[]）时，其回调函数仅在组件首次挂载（mount）时执行一次，组件卸载（unmount）时会执行返回的清理函数（如果有的话）。这与类组件中的 componentDidMount 在“仅执行一次”的行为上相似，但存在关键区别：

1. 执行时机不同：

   • componentDidMount 在组件挂载后同步执行（在浏览器绘制之前）。
   • useEffect(() => {}, []) 的回调是异步调度的，在浏览器完成绘制后执行（属于“layout 之后、paint 之后”的微任务或宏任务阶段，具体取决于 React 版本和是否使用 createRoot）。

2. 是否阻塞渲染：

   • componentDidMount 不阻塞浏览器绘制。
   • useEffect 也不阻塞，但更明确地设计为“副作用”钩子，强调非阻塞性。

3. 适用场景差异：

   • useEffect([], ...) 适合执行不需阻塞 UI 的副作用，如数据获取、订阅等。
   • 如果需要在 DOM 挂载后立即测量布局或执行同步 DOM 操作，应使用 useLayoutEffect，它更接近 componentDidMount 的同步特性。

4. 清理机制：

   • useEffect 支持通过返回函数自动处理卸载时的清理，而 componentDidMount 需配合 componentWillUnmount 手动清理。

因此，虽然 useEffect([], ...) 在“执行一次”的语义上类似于 componentDidMount，但其异步性和 React 并发模式下的行为使其并非完全等价。在需要严格同步行为时，应考虑 useLayoutEffect。