在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 的第一个参数)：
- 这是一个函数，包含了我们希望在渲染后执行的副作用逻辑。在这个例子中，它定义了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。
遵循这些原则，将有助于您编写出更稳定、更高效的React组件。
