掌握 React useEffect：避开三大高频陷阱，提升组件稳定性

在 React Hooks 中，useEffect 是处理副作用的核心，但许多开发者常因使用不当引发 bug。以下三个关键点助你规避常见陷阱：

1. 依赖数组不完整：性能与正确性的博弈
   遗漏依赖项是最大误区。React 严格依赖数组决定何时执行 effect。

   const [count, setCount] = useState(0);
   useEffect(() => {
       const timer = setInterval(() => setCount(c => c + 1), 1000); 
       return () => clearInterval(timer);
   }, []); // 错误！缺少 count 依赖（但此处用函数更新可避免）
   

   解决：使用 eslint-plugin-react-hooks 自动检查，或确保所有 effect 内使用的 state/props 均被声明。

2. 遗忘清理函数：内存泄漏的元凶
   订阅、定时器等资源若不清理，将导致组件卸载后持续运行：

   useEffect(() => {
       window.addEventListener('resize', handleResize);
       // 缺少 return () => window.removeEventListener('resize', handleResize);
   }, []);
   

   法则：若 effect 创建了需手动释放的资源，必须返回清理函数。

3. 过度渲染：无意义的重复执行
   未优化依赖项或未拆分 effect 会导致性能损耗：

   useEffect(() => {
       fetchData(); // 本应仅在 id 变化时执行
   }, [id, unrelatedState]); // unrelatedState 变化触发多余请求
   

   优化：拆分 effect 为多个独立逻辑，或使用 useCallback/useMemo 稳定函数依赖。

总结：精确声明依赖、及时清理资源、合理拆分逻辑，是高效安全使用 useEffect 的铁律。理解其“同步到外部系统”的本质，方能写出健壮的 React 组件。

技术标签： #ReactHooks #前端优化 #useEffect指南 #JavaScript #Web开发