React中useEffect搭配addEventListener无法正常工作的问题

场景1：代码原样时无反应，仅打印0 #

问题根源 #

1. 清理函数写法错误：你在useEffect里直接执行了div.removeEventListener('click', handleCount)，而非返回一个清理函数。这会导致组件挂载时，刚绑定完事件就立刻把事件移除，点击div自然没有任何反应。React要求清理逻辑必须是一个返回的函数，会在组件卸载或依赖变化时执行。
2. handleCount2从未绑定：handleCount2仅在useEffect内部定义，但你从未通过addEventListener将其绑定到div上，所以不可能被触发。

场景2：移除removeEventListener后，handleCount正常但handleCount2触发时打印两次 #

问题根源 #

如果此时你把绑定的函数换成了handleCount2，并且让useEffect随组件渲染重复执行（比如依赖数组添加了count），就会导致每次渲染都给div绑定一个新的handleCount2，旧事件又没被清理。点击一次div会触发所有绑定的handleCount2，count被多次递增，自然会打印多个值。

场景3：让绑定事件的useEffect每次都执行，问题更严重 #

问题根源 #

每次组件渲染都执行useEffect，且没有正确清理旧事件，会导致div上绑定大量重复的事件处理函数。点击一次div会触发所有这些函数，count跳着增加，打印次数也会越来越多，问题自然加剧。

正确实现方式 #

方案1：绑定组件内定义的handleCount（带缓存优化） #

import React, { useEffect, useRef, useState, useCallback } from 'react'

export default function LOL() {
    const [count, setCount] = useState(0);
    const divRef = useRef(null);

    // 用useCallback缓存handleCount，避免每次渲染重新创建函数
    const handleCount = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    useEffect(() => {
        const div = divRef.current;
        if (!div) return;

        // 绑定事件
        div.addEventListener('click', handleCount);

        // 正确的清理函数：返回一个函数用于移除事件
        return () => {
            div.removeEventListener('click', handleCount);
        };
    }, [handleCount]); // 依赖缓存后的handleCount，仅在函数变化时重新绑定

    // 监听count变化打印
    useEffect(() => {
        console.log('count更新后的值：', count);
    }, [count])

    return (
        <div ref={divRef} style={{
            width: '500px',
            height: '500px',
            backgroundColor: 'black'
        }}>
        </div>
    )
}

方案2：绑定useEffect内部的handleCount2 #

如果一定要在useEffect内部定义事件处理函数，用函数式更新即可避免闭包问题：

import React, { useEffect, useRef, useState } from 'react'

export default function LOL() {
    const [count, setCount] = useState(0);
    const divRef = useRef(null);

    useEffect(() => {
        const div = divRef.current;
        if (!div) return;

        const handleCount2 = () => {
            // 用函数式更新，不受闭包影响，总能拿到最新的prev值
            setCount(prev => prev + 1);
        };

        div.addEventListener('click', handleCount2);

        // 清理函数移除事件
        return () => {
            div.removeEventListener('click', handleCount2);
        };
    }, []); // 依赖为空数组，仅挂载时绑定一次

    useEffect(() => {
        console.log('count更新后的值：', count);
    }, [count])

    return (
        <div ref={divRef} style={{
            width: '500px',
            height: '500px',
            backgroundColor: 'black'
        }}>
        </div>
    )
}

关键注意事项 #

1. 清理函数必须返回函数：React要求useEffect的清理逻辑是一个返回的函数，不能直接执行清理操作，否则会导致事件刚绑定就被移除。
2. 避免重复绑定：要么用useCallback缓存事件处理函数，要么在useEffect依赖数组中包含该函数，确保每次函数变化时先移除旧事件再绑定新事件。
3. 函数式更新防闭包：更新state时用setState(prev => prev + 1)的形式，不需要依赖当前state值，彻底避免闭包导致的state过期问题。
4. useRef存最新值：如果需要在事件处理中访问最新的state/props，用useRef实时同步值，就能避开闭包陷阱。

内容的提问来源于stack exchange，提问作者Tarun Kumar