深入理解React useEffect：DOM交互中的必要性与最佳实践-js教程-PHP中文网

深入理解React useEffect：DOM交互中的必要性与最佳实践

花韻仙語

发布： 2025-11-04 18:50:02

原创

663人浏览过

深入理解React useEffect：DOM交互中的必要性与最佳实践

在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 解决了上述所有问题：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

查看详情

执行时机控制：useEffect 的回调函数在组件渲染完成后执行，而不是在渲染过程中。这遵循了React的生命周期原则，将副作用与渲染分离。
空依赖数组 []：当 useEffect 的第二个参数（依赖数组）为空时，它的回调函数只会在组件首次挂载时执行一次。这意味着 window.addEventListener 只会被调用一次，避免了重复添加监听器。
清理函数：useEffect 的回调函数可以返回一个清理函数。这个清理函数会在组件卸载时执行，或者在下一次 useEffect 重新执行前执行（如果依赖项发生变化）。在本例中，它负责调用 window.removeEventListener，确保在组件不再需要时，事件监听器能够被正确移除，从而有效防止内存泄漏。