深入理解React useEffect在DOM交互中的必要性-js教程-PHP中文网

深入理解React useEffect在DOM交互中的必要性

心靈之曲

发布： 2025-11-04 19:02:20

原创

183人浏览过

深入理解React useEffect在DOM交互中的必要性

在react组件中进行dom操作（如添加事件监听器）时，`useeffect`是管理副作用的关键。它确保代码仅在组件挂载时执行一次，并通过清理函数防止内存泄漏，从而避免在渲染阶段重复添加监听器导致的性能问题和资源浪费。

React中DOM操作与副作用管理

在React应用开发中，组件的渲染过程应该是一个纯函数，即给定相同的props和state，它总是返回相同的UI，并且不应该产生任何可观察的副作用。然而，与外部系统（如浏览器DOM、网络请求、订阅等）交互是现代Web应用不可避免的一部分，这些交互被称为“副作用”。React提供了useEffect Hook来专门处理这些副作用，确保它们在组件生命周期的特定阶段安全、高效地执行。

为什么不应在渲染阶段直接操作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,
    }} />
  );
}

登录后复制

尽管上述代码在首次渲染时看起来能够正常工作，但在实际应用中会带来严重的性能和内存问题：

重复添加监听器： 当组件的state或props发生变化时，组件会重新渲染。这意味着每次重新渲染时，window.addEventListener('pointermove', handleMove) 这行代码都会再次执行，导致同一个事件监听器被重复添加到window对象上。
性能下降： 随着监听器数量的增加，每次鼠标移动都会触发更多的回调函数，严重影响应用的响应性能。
内存泄漏： 如果组件被卸载，之前添加的所有事件监听器都不会被移除。这些监听器会继续占用内存，并可能在组件不再存在时尝试访问其状态或方法，导致错误。

使用 useEffect 安全地管理DOM副作用

useEffect Hook 是React处理副作用的官方推荐方式。它允许你在组件渲染之后执行副作用，并在组件卸载时进行清理。

以下是使用useEffect改进后的正确实现：

新鲜水果网站销售模板

网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的

查看详情

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 中的回调函数会在每次渲染（首次渲染和后续更新）完成后执行。这与直接在渲染阶段执行代码不同，它确保了DOM已经更新完毕。
依赖数组： useEffect 的第二个参数是一个依赖数组。
- 空数组 []： 表示该副作用只在组件挂载时执行一次，并在组件卸载时执行清理函数。这对于只需要设置一次的全局事件监听器、订阅或数据获取非常有用。
- 无依赖数组： （不推荐）表示副作用在每次渲染后都执行。这通常会导致性能问题，除非你确实需要每次渲染后都重新执行副作用。
- 包含依赖项的数组 [dep1, dep2]： 表示副作用会在组件挂载时执行，并在依赖项（dep1 或 dep2）发生变化时重新执行。
清理函数： useEffect 回调函数可以返回一个函数，这个返回的函数就是清理函数。它会在下一次副作用执行之前（如果依赖项改变）或在组件卸载时执行。清理函数对于取消订阅、清除定时器、移除事件监听器等操作至关重要，以防止内存泄漏和不必要的资源占用。

总结与最佳实践

在React中进行DOM操作或任何其他副作用时，useEffect是不可或缺的工具。它将副作用代码与渲染逻辑分离，确保了组件的纯粹性，并提供了在组件生命周期中管理这些副作用的机制。

核心要点：

避免在渲染阶段直接修改DOM或执行副作用。 渲染阶段应该专注于计算和返回UI。
使用 useEffect 来处理所有副作用， 包括但不限于：
- 添加/移除事件监听器
- 订阅外部数据源
- 发起网络请求
- 手动修改DOM
- 设置定时器
始终为 useEffect 提供一个合适的依赖数组。 对于只需要执行一次的副作用，使用空数组 []。
利用 useEffect 的清理函数来撤销副作用， 防止内存泄漏和资源浪费。