在react中，直接在渲染阶段操作dom或订阅外部事件会导致性能问题和内存泄漏。`useeffect`钩子提供了一种安全且声明式的方式来处理副作用，如添加dom事件监听器。通过结合空依赖数组和清理函数，`useeffect`确保事件监听器仅在组件挂载时添加一次，并在组件卸载时正确移除，从而维护应用的性能和稳定性，避免了在渲染过程中产生副作用。
在react组件的开发过程中，我们经常需要与浏览器DOM或外部系统进行交互，例如添加事件监听器、订阅数据源或手动修改DOM。初学者可能会发现，在某些情况下，即使不使用useEffect，代码也能“正常”运行，这引发了一个关键问题：useEffect在处理DOM交互时是否真的不可或缺？本文将深入探讨这一问题，并阐明useEffect在管理副作用方面的核心作用。
直接操作DOM的潜在陷阱
考虑一个简单的场景：追踪鼠标在页面上的位置。如果我们在组件的渲染逻辑中直接添加事件监听器，代码可能如下所示：
export default function app() { const [position, setPosition] = useState({ x: 0, y: 0 }); function handleMove(e) { setPosition({ x: e.clientX, y: e.clientY }); } // 错误示范：直接在渲染阶段添加事件监听器 window.addEventListener('pointermove', handleMove); return ( <div style={{ position: 'absolute', backgroundColor: 'pink', borderRadius: '50%', opacity: 0.6, transform: `translate(${position.x}px, ${position.y}px)`, pointerEvents: 'none', left: -20, top: -20, width: 40, height: 40, }} /> ); }
这段代码在功能上似乎可以实现鼠标位置追踪。然而，它存在严重的隐患。在React中，组件会因为状态更新、父组件重新渲染等多种原因而频繁地重新渲染。每次组件重新渲染时，window.addEventListener(‘pointermove’, handleMove); 这行代码都会被执行，导致：
- 重复添加事件监听器：每次重新渲染都会在 window 对象上添加一个新的 pointermove 事件监听器。即使是同一个 handleMove 函数引用，也会被视为一个新的监听器实例。
- 性能下降：随着时间的推移，页面上会积累大量的重复监听器。每次鼠标移动时，所有这些监听器都会被触发，造成不必要的计算开销，严重影响应用性能。
- 内存泄漏：更重要的是，当组件卸载时，这些被添加的监听器并不会自动移除。它们会持续存在于内存中，即使组件已经不再显示，也仍然占用资源，导致内存泄漏。
useEffect：管理副作用的正确姿势
useEffect 钩子正是为了解决这类副作用管理问题而设计的。它允许我们将副作用代码与组件的渲染逻辑分离，并在React的控制下执行。
以下是使用 useEffect 改进后的代码示例：
import React, { useState, useEffect } from 'react'; export default function App() { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { function handleMove(e) { setPosition({ x: e.clientX, y: e.clientY }); } // 在组件挂载时添加事件监听器 window.addEventListener('pointermove', handleMove); // 返回一个清理函数，在组件卸载时移除事件监听器 return () => { window.removeEventListener('pointermove', handleMove); }; }, []); // 空依赖数组表示此Effect只在组件挂载和卸载时执行一次 return ( <div style={{ position: 'absolute', backgroundColor: 'pink', borderRadius: '50%', opacity: 0.6, transform: `translate(${position.x}px, ${position.y}px)`, pointerEvents: 'none', left: -20, top: -20, width: 40, height: 40, }} /> ); }
这段代码通过 useEffect 解决了上述所有问题：
- 执行时机控制：useEffect 的回调函数在组件渲染完成后执行，而不是在渲染过程中。这遵循了React的生命周期原则，将副作用与渲染分离。
- 空依赖数组 []：当 useEffect 的第二个参数（依赖数组）为空时，它的回调函数只会在组件首次挂载时执行一次。这意味着 window.addEventListener 只会被调用一次，避免了重复添加监听器。
- 清理函数：useEffect 的回调函数可以返回一个清理函数。这个清理函数会在组件卸载时执行，或者在下一次 useEffect 重新执行前执行（如果依赖项发生变化）。在本例中，它负责调用 window.removeEventListener，确保在组件不再需要时，事件监听器能够被正确移除，从而有效防止内存泄漏。
核心原则：避免渲染阶段的副作用
React的设计理念之一是，渲染阶段应该是纯净的，不应产生任何副作用。这意味着在组件函数体（不包括 useEffect 或其他钩子内部）中，不应该有任何改变外部世界的操作，例如：
- 修改DOM
- 发起网络请求
- 设置定时器
- 订阅外部事件
这些操作都属于“副作用”，它们应该被封装在 useEffect 中，以便React能够管理它们的生命周期，确保在正确的时间执行和清理。
总结与最佳实践
毫无疑问，当你在React组件中需要与DOM进行交互（如添加/移除事件监听器）、订阅外部系统（如websocket）或执行其他会影响外部世界的异步操作时，useEffect 是不可或缺的。
关键 takeaways：
- 副作用管理：useEffect 是React中处理副作用（如DOM操作、数据获取、订阅）的标准方式。
- 避免渲染副作用：切勿在组件的渲染逻辑中直接执行副作用操作，这会导致性能问题和内存泄漏。
- 依赖数组：合理使用 useEffect 的依赖数组来控制副作用的执行时机。空数组 [] 意味着只在组件挂载和卸载时执行一次。
- 清理函数：始终为 useEffect 返回一个清理函数，以撤销副作用（如移除事件监听器、取消订阅），防止内存泄漏。
通过遵循这些最佳实践，你可以构建出更健壮、性能更优、更易于维护的React应用。useEffect 不仅仅是一个选项，它是React生态系统中管理副作用的基石。