Lazy loaded image
技术分享
了解 React useEffect 的常见陷阱
字数 574阅读时长≈ 2 分钟
2022-1-8
2025-5-10
type
status
date
slug
summary
tags
category
icon
password

了解 React useEffect 的常见陷阱

useEffect 是 React 中用于处理副作用的 Hook。虽然语法简单，但如果不了解它的运行机制和依赖规则，很容易踩坑。本文将深入解析 useEffect 的常见陷阱和如何正确使用它。

一、陷阱一：依赖数组不写或写错

❌ 错误示例：

如果 fetchData 是外部作用域的函数（非 useCallback），在 React 严格模式或更新中可能出现引用错误。

✅ 正确示例：

原则： 所有在 useEffect 中使用到的变量或函数，必须出现在依赖数组中，除非你非常确定它不会变化。

二、陷阱二：无限循环渲染

❌ 错误示例：

这会导致组件一直触发更新，陷入死循环。

✅ 正确处理方式：

  • 在副作用内部避免更新依赖本身。
  • 若必须做此类逻辑，考虑加判断。

三、陷阱三：清理函数忘记写

场景：订阅、定时器、事件监听

✅ 正确写法：

useEffect 返回一个函数作为清理逻辑，它会在组件卸载或依赖变化时执行。

四、陷阱四：对异步函数使用不当

不能直接将 async 函数作为 useEffect 参数：

✅ 正确写法：

或者使用 IIFE：

五、陷阱五：闭包陷阱（stale state）

解决方案：使用函数式更新或 ref

 
上一篇
初识React-Nateive与跨平台开发
下一篇
详解 React useCallback 和 useMemo
目录