React中DOM操作的正确姿势：useEffect的重要性与实践-js教程-PHP中文网

React中DOM操作的正确姿势：useEffect的重要性与实践

霞舞

发布： 2025-11-04 19:15:01

原创

989人浏览过

React中DOM操作的正确姿势：useEffect的重要性与实践

在react组件中处理dom交互时，`useeffect`钩子至关重要。它确保事件监听器等副作用在组件挂载时只执行一次，并在卸载时被正确清理，有效避免了重复注册、性能下降和内存泄漏。将副作用与渲染阶段分离，是构建稳定高效react应用的关键实践。

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

React组件的渲染过程是一个纯函数，它根据当前的props和state计算并返回用户界面（UI）。在这个纯粹的计算过程中，我们不应执行任何与外部系统交互的操作，这些操作被称为“副作用”（Side Effects）。常见的副作用包括：

DOM操作：手动添加、修改或移除DOM元素，例如添加全局事件监听器。
数据获取：从API请求数据。
订阅与取消订阅：订阅外部数据源（如WebSocket、RxJS流），并在组件卸载时取消订阅。
定时器：设置setTimeout或setInterval。

如果在组件的渲染阶段（即组件函数体内部）直接执行这些副作用，可能会导致一系列问题，包括性能下降、内存泄漏以及难以预测的行为。React提供了useEffect钩子来专门管理这些副作用，确保它们在合适的时机执行，并且能够被妥善清理。

useEffect：管理组件生命周期副作用的利器

useEffect是React Hooks中的一个重要成员，它允许你在函数组件中执行副作用。它的基本工作原理是在组件渲染完成后，异步地执行其回调函数。useEffect的核心价值在于：

控制副作用的执行时机：通过依赖数组（dependency array），你可以精确控制副作用何时重新运行。
提供清理机制：useEffect的回调函数可以返回一个清理函数，用于在组件卸载或下次副作用重新执行前清理之前的副作用。

useEffect与空依赖数组 []

当useEffect的依赖数组为空（[]）时，这意味着副作用只会在组件“挂载”时执行一次，并在组件“卸载”时执行其返回的清理函数。这对于那些只需要设置一次且在组件生命周期内保持不变的副作用（如全局事件监听器、一次性数据订阅）尤为重要。

清理函数 return () => {}

useEffect的回调函数可以返回一个函数，这个返回的函数就是清理函数。它的作用是在以下两种情况发生时执行：

组件即将卸载。
下一次useEffect回调函数执行之前（如果依赖项发生变化）。

清理函数对于避免内存泄漏和不必要的资源占用至关重要，例如移除事件监听器、取消订阅或清除定时器。

为什么不能直接在渲染阶段操作DOM？

直接在组件函数体（渲染阶段）中添加事件监听器等DOM操作是不推荐且危险的实践，原因如下：

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

重复注册问题：
- React组件在状态（state）或属性（props）发生变化时会重新渲染。
- 如果事件监听器直接写在组件函数体中，每次重新渲染都会导致一个新的监听器被添加到DOM元素上，而旧的监听器并未被移除。
- 这会迅速累积大量的重复监听器，导致同一事件触发时，回调函数被执行多次，严重影响应用性能。
- 更糟糕的是，这些未被移除的旧监听器会一直占用内存，造成内存泄漏。
渲染循环风险：
- 某些DOM操作可能会触发组件的重新渲染，如果这些操作又在渲染阶段被执行，可能形成无限循环，导致应用崩溃。
时机不确定性：
- 渲染阶段的主要任务是计算并返回JSX。实际的DOM更新发生在渲染之后。在渲染阶段直接操作DOM，可能会操作到旧的DOM元素，或者在元素尚未被渲染到DOM中时就尝试操作，导致错误。

代码示例与对比分析

下面通过代码示例对比两种不同的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 });
  }
  // 问题所在：每次组件因position状态更新而重新渲染时，
  // 都会再次执行这行代码，导致重复添加监听器。
  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状态更新时，App组件都会重新渲染。在每次渲染中，window.addEventListener('pointermove', handleMove);这行代码都会被执行，从而在window对象上注册一个新的handleMove事件监听器。由于没有对应的removeEventListener来清理，这会导致：

性能下降：随着时间的推移，pointermove事件会触发成百上千次handleMove函数执行，造成不必要的计算负担。
内存泄漏：即使App组件最终从DOM中卸载，之前添加的所有监听器仍然会存在于window对象上，持续占用内存，并且可能引用组件内部的状态和闭包，阻止垃圾回收。

正确示例：使用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);

    // ✅ 清理函数：在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('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,
    }} />
  );
}

登录后复制

分析：这个版本是正确的实践方式。通过将事件监听器的注册和移除逻辑封装在useEffect中，并使用一个空的依赖数组[]，我们实现了以下目标：

单次注册：window.addEventListener('pointermove', handleMove);只在组件初次挂载到DOM时执行一次。
有效清理：当组件即将从DOM中卸载时，return () => { window.removeEventListener('pointermove', handleMove); };中的清理函数会被调用，确保事件监听器被正确移除。
避免性能问题和内存泄漏：组件的重新渲染不会导致额外的监听器被添加，并且组件卸载时所有资源都会被释放。

最佳实践与注意事项

将副作用隔离：任何与组件渲染结果不直接相关的操作（如DOM操作、订阅、数据请求等）都应放入useEffect中。
及时清理副作用：对于任何会创建订阅、定时器或事件监听器的副作用，务必在useEffect的返回函数中提供清理逻辑。这是防止内存泄漏的关键。
正确使用依赖数组：
- []：仅在组件挂载时执行一次，并在卸载时清理。适用于全局事件监听、一次性数据获取等。
- 不提供依赖数组：每次渲染后都执行副作用。通常用于在每次渲染后同步某些状态。
- 包含依赖项：仅当依赖项发生变化时才重新执行副作用。
避免在渲染阶段修改DOM：渲染阶段应保持纯净，只负责计算并返回JSX。任何对DOM的直接修改都应推迟到useEffect中。
关注性能：虽然useEffect解决了副作用管理的问题，但过度使用或不当使用依赖数组仍可能导致不必要的副作用重复执行，影响性能。始终确保依赖数组尽可能地精确。

总结

useEffect是React中处理副作用的核心机制，尤其对于DOM操作至关重要。它提供了一种安全、可控的方式来与外部系统（如浏览器DOM）交互，同时遵守React的声明式UI范式。正确使用useEffect，特别是其依赖数组和清理函数，是编写高性能、无内存泄漏和可维护React应用的关键。通过将副作用逻辑从渲染阶段中分离出来，我们可以构建更健壮、更易于理解和调试的React组件。

以上就是React中DOM操作的正确姿势：useEffect的重要性与实践的详细内容，更多请关注php中文网其它相关文章！