React中DOM操作与useEffect：理解其必要性与最佳实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

React中DOM操作与useEffect：理解其必要性与最佳实践

2025-11-04

浏览次数：次

返回列表

React中DOM操作与useEffect：理解其必要性与最佳实践

在react中处理dom事件时，useeffect钩子至关重要。它确保事件监听器仅在组件挂载时添加，避免在每次渲染时重复添加导致性能下降。同时，useeffect的清理函数能够妥善移除监听器，防止内存泄漏，从而维护组件的稳定性和应用性能，避免在渲染阶段产生副作用。

React组件与DOM交互的挑战

在React函数组件中，我们经常需要与浏览器DOM进行交互，例如添加全局事件监听器、操作DOM元素或订阅外部系统。然而，直接在组件的渲染逻辑中执行这些“副作用”操作，往往会导致意想不到的问题和性能瓶颈。

考虑以下两种在React组件中添加pointermove事件监听器的方式：

方式一：直接在渲染阶段添加事件监听器 (不推荐)

import React, { useState } from 'react';

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,
    }} />
  );
}

表面上看，上述代码似乎能正常工作，实现鼠标移动时小球跟随的效果。然而，这种做法存在严重缺陷。每当组件的state（例如position）更新时，组件都会重新渲染。这意味着window.addEventListener('pointermove', handleMove);这行代码会在每次渲染时重复执行，导致浏览器不断添加新的事件监听器。随着时间的推移，页面上会积累大量重复的事件监听器，这不仅会严重影响应用性能，还可能导致内存泄漏。更糟糕的是，当组件卸载时，这些监听器并不会被自动移除。

解决方案：useEffect钩子的正确使用

React提供了useEffect钩子来专门处理函数组件中的副作用。它允许我们在组件渲染之后执行一些操作，并且提供了清理机制。

方式二：使用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);

    // 返回一个清理函数，在组件卸载或effect重新执行前调用
    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,
    }} />
  );
}

这段代码是处理DOM事件监听器的正确方式。让我们分解useEffect的关键部分：

副作用函数 (useEffect 的第一个参数)：
BrandCrowd
一个在线Logo免费设计生成器
200 查看详情
- 这是一个函数，包含了我们希望在渲染后执行的副作用逻辑。在这个例子中，它定义了handleMove函数并注册了pointermove事件监听器。
- useEffect的回调函数会在组件首次渲染后执行。
清理函数 (return 语句)：
- useEffect的回调函数可以返回一个清理函数。这个清理函数会在组件卸载时执行，或者在下一次副作用函数执行之前（如果依赖项发生变化）。
- 在这个例子中，清理函数负责调用window.removeEventListener('pointermove', handleMove);来移除事件监听器。这是防止内存泄漏的关键。
依赖项数组 ([])：
- useEffect的第二个参数是一个数组，称为依赖项数组。它告诉React何时重新运行副作用函数。
- 当依赖项数组为空[]时，表示这个副作用只在组件挂载时运行一次，并且在组件卸载时执行清理函数。这对于全局事件监听器、订阅等只需要设置一次的副作用非常有用。

为什么不能在渲染阶段产生副作用？

React的设计哲学之一是，组件的渲染阶段应该是“纯净的”（pure）。这意味着：

只计算，不修改：渲染阶段的主要任务是根据当前的props和state计算出要显示什么UI。它不应该直接修改DOM、发起网络请求、设置定时器或执行任何其他会影响外部系统的操作。
可预测性：纯净的渲染函数使得组件的行为更可预测，更易于测试和调试。
性能优化：React可能会多次渲染组件（例如，在开发模式下或为了性能优化），如果渲染阶段有副作用，这些副作用也会被多次触发，导致不可预知的问题。

useEffect的存在正是为了将这些“副作用”从纯净的渲染阶段中分离出来，确保它们在React完成DOM更新之后，以受控的方式执行。

总结与最佳实践

正确使用useEffect是构建健壮、高性能React应用的关键，尤其是在涉及DOM操作和外部系统交互时：

始终使用useEffect处理副作用：无论是添加事件监听器、数据获取、订阅外部服务还是直接操作DOM，都应将其封装在useEffect中。
理解依赖项数组：
- 空数组[]：副作用只在组件挂载时运行一次，并在卸载时清理。
- 包含依赖项的数组[dep1, dep2]：副作用会在组件挂载时和任何依赖项改变时运行，并在每次重新运行前清理。
- 省略依赖项数组：副作用会在每次渲染后运行，这很少是最佳实践，可能导致性能问题。
提供清理函数：如果副作用会创建任何需要在组件生命周期结束时销毁的东西（如事件监听器、定时器、订阅），务必在useEffect中返回一个清理函数。这是防止内存泄漏和资源浪费的关键。
避免在渲染阶段修改DOM或外部系统：渲染函数应保持纯净，只负责返回UI。