字数

690 字

阅读时间

3 分钟

useEffect 和 useLayoutEffect 是 React 中的两个 Hook，它们用于在函数组件中处理副作用。尽管它们在语法上类似，但在执行时机和适用场景上有所不同。

useEffect

特点：

• 执行时机：在浏览器完成布局与绘制之后才会执行。通常用于异步操作、数据获取、订阅等不需要同步阻塞渲染的副作用。
• 性能：由于它在绘制之后执行，不会阻塞浏览器的布局和绘制，因此性能较好，适合绝大多数副作用处理场景。

使用场景：

• 数据获取（例如，fetch 请求）。
• 订阅和取消订阅（例如，WebSocket 或事件监听）。
• 操作 DOM 但不需要立即生效的场景。

useEffect(() => {
  // 副作用逻辑
  console.log('useEffect');
  return () => {
    // 清理逻辑
  };
}, [dependencies]);

useLayoutEffect

特点：

• 执行时机：在浏览器完成 DOM 更新后、绘制之前同步执行。用于需要在浏览器绘制前同步执行的副作用，确保副作用会在浏览器绘制前完成。
• 性能：因为会阻塞浏览器的绘制，所以要谨慎使用，通常用于需要同步操作 DOM 的场景。

使用场景：

• 需要同步读取布局信息并且立即重新渲染的场景。
• 操作 DOM 并且需要在下一次重绘之前完成。

useLayoutEffect(() => {
  // 副作用逻辑
  console.log('useLayoutEffect');
  return () => {
    // 清理逻辑
  };
}, [dependencies]);

异同点对比

相同点：

• 都是用于在函数组件中处理副作用。
• 都可以接收一个依赖项数组，以控制副作用的执行时机。
• 都可以返回一个清理函数，用于在组件卸载或副作用重新执行前进行清理。

不同点：

• 执行时机：useEffect 在组件渲染完毕后执行，而 useLayoutEffect 在组件更新 DOM 后、浏览器绘制前同步执行。
• 使用场景：useEffect 适用于大多数异步副作用操作，useLayoutEffect 适用于需要同步操作 DOM 的场景。
• 性能：useEffect 对性能影响较小，不会阻塞绘制；useLayoutEffect 会阻塞绘制，需谨慎使用。

总结来说，useEffect 是默认推荐的副作用 Hook，适用于大多数场景。只有在需要同步操作 DOM 并确保在浏览器绘制前完成时，才使用 useLayoutEffect。

贡献者

sunchengzhi

文件历史

最后编辑于 6 个月前查看完整历史

de5fa-fix:修改文件名 于 11/9/2024