React中DOM操作与useEffect的正确实践-js教程-PHP中文网

React中DOM操作与useEffect的正确实践

聖光之護

发布： 2025-11-04 18:58:10

原创

329人浏览过

React中DOM操作与useEffect的正确实践

在react中，直接在渲染阶段操作dom，如添加事件监听器，会导致性能问题和内存泄漏。本文将深入探讨为什么以及如何在react组件中使用`useeffect`钩子来正确管理dom相关的副作用。通过`useeffect`，我们可以确保事件监听器仅在组件挂载时添加，并在组件卸载时清理，从而避免重复注册和资源浪费，保持组件的健壮性和高效性。

理解React的渲染机制与副作用

React组件的渲染阶段（render phase）应该是一个纯净（pure）的过程，这意味着它只负责计算并返回UI的描述（JSX），而不应该产生任何副作用。纯函数在给定相同输入时总是返回相同输出，并且不会修改任何外部状态或执行其他可观察到的操作。

然而，在实际应用中，我们经常需要与外部系统交互，例如：

订阅外部数据源（如WebSocket、浏览器事件）。
手动修改DOM（如设置焦点、测量元素尺寸）。
发起网络请求。
操作浏览器API（如localStorage、定时器）。

这些与组件渲染结果无关，但又必须执行的操作，被称为“副作用”（side effects）。DOM事件监听器就是典型的副作用之一，因为它直接操作了浏览器全局对象window。

直接操作DOM的潜在问题

如果在React组件的渲染阶段直接添加DOM事件监听器，会带来严重的性能和稳定性问题。考虑以下代码示例：

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

登录后复制

这段代码看似能够实现鼠标移动效果，但存在以下严重问题：

重复添加监听器： 每当组件因状态更新（如position变化）而重新渲染时，window.addEventListener('pointermove', handleMove)都会被再次执行。这意味着每次渲染都会添加一个新的事件监听器，而旧的监听器并未被移除。
性能下降： 随着监听器数量的增加，每次鼠标移动都会触发所有注册的handleMove函数，导致不必要的计算和性能开销。
内存泄漏： 如果组件被卸载（从DOM中移除），这些重复添加的事件监听器仍然会存在于window对象上，并且它们会持有对组件内部状态和函数的引用，阻止垃圾回收，从而导致内存泄漏。

useEffect：管理DOM副作用的解决方案

React提供了useEffect钩子来专门处理组件的副作用。useEffect中的代码会在组件渲染完成后执行，而不是在渲染过程中。这确保了副作用不会干扰渲染阶段的纯净性。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

以下是使用useEffect正确管理DOM事件监听器的示例：

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

登录后复制

在这个正确的实现中：

执行时机： useEffect的回调函数在组件首次渲染到屏幕后执行。
依赖数组 []： 传递一个空数组作为useEffect的第二个参数，告诉React这个effect不依赖于组件的任何props或state。这意味着effect的回调函数只会在组件首次挂载时执行一次，并且在组件卸载时执行其清理函数。
清理函数： useEffect的回调函数可以返回一个函数，这个返回的函数就是清理函数（cleanup function）。React会在组件卸载时调用这个清理函数，或者在下一次effect重新执行之前（如果依赖项发生变化）调用。在这里，清理函数负责移除之前添加的事件监听器，有效防止了内存泄漏和重复注册问题。

何时需要使用useEffect处理DOM操作

通常，当你的组件需要与React渲染流程之外的事物同步时，就应该考虑使用useEffect。这包括但不限于：

订阅外部事件： 例如，window上的鼠标、键盘事件，或者第三方库提供的事件。
手动修改DOM： 当你需要直接操作DOM元素时，例如设置焦点、滚动到特定位置、测量元素尺寸等，应该在useEffect中使用useRef来获取DOM引用。
与其他UI库集成： 当你在React中使用非React的DOM操作库时，如D3.js、jQuery插件等。
数据获取与同步： 发起网络请求并处理响应也是一种副作用。

总结与最佳实践

避免在渲染阶段产生副作用： React组件的渲染阶段应该是纯净的，只负责计算UI。所有与外部系统交互或修改外部状态的操作都应被视为副作用。
利用useEffect管理副作用： useEffect是React Hooks中处理副作用的核心机制。它确保副作用在渲染完成后执行，并且提供了清理机制。
始终考虑清理函数： 对于任何在useEffect中订阅的事件、创建的定时器或打开的连接，都应该在清理函数中进行相应的解除订阅、清除或关闭操作，以避免内存泄漏和资源浪费。
正确使用依赖数组：
- 空数组[]：表示effect只在组件挂载时运行一次，并在卸载时清理。适用于一次性设置和清理的场景。
- 有依赖项的数组[dep1, dep2]：表示effect会在组件挂载时运行，并在任何依赖项发生变化时重新运行，并在下一次重新运行前清理。
- 省略依赖数组：表示effect会在每次渲染后都运行，并在每次重新运行前清理。通常应避免，因为它可能导致不必要的性能开销。