React中为窗口及容器添加滚动事件的优化方案咨询

你的代码确实存在两个核心问题：一是直接通过document查询DOM元素不符合React组件化的设计思路，二是未清理绑定的事件监听，容易引发内存泄漏。以下是更规范的实现方案：

1. 用useRef获取自定义容器元素 #

React推荐通过useRef来访问组件内的DOM元素，避免直接操作document，这样能更好地和组件生命周期联动，也更符合React的状态管理逻辑。

2. 必须清理事件监听 #

在组件卸载或依赖更新时，要移除绑定的滚动事件，防止无用的事件回调持续占用内存。

3. 处理回调的依赖陷阱 #

确保closeMenu能正确获取最新状态，或者使用函数式更新避免闭包导致的状态过时问题。

完整优化代码 #

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

// 组件内部逻辑
const [isActionListVisible, setIsActionListVisible] = useState(false);
const layoutRef = useRef(null);

const closeMenu = () => {
    // 用函数式更新确保获取最新状态
    setIsActionListVisible(prev => false);
};

useEffect(() => {
    // 绑定window滚动事件
    window.addEventListener('scroll', closeMenu);
    
    // 绑定自定义容器的滚动事件
    const layoutElement = layoutRef.current;
    if (layoutElement) {
        layoutElement.addEventListener('scroll', closeMenu);
    }

    // 清理函数：组件卸载/依赖更新时移除事件监听
    return () => {
        window.removeEventListener('scroll', closeMenu);
        if (layoutElement) {
            layoutElement.removeEventListener('scroll', closeMenu);
        }
    };
}, [closeMenu]); // 依赖closeMenu，确保回调更新时重新绑定事件

// JSX中为自定义容器绑定ref
return (
    <div className="common-home-layout" ref={layoutRef}>
        {/* 组件内容 */}
    </div>
);

关键细节说明 #

• useRef的优势：直接关联组件内的DOM元素，无需全局DOM查询，组件重新渲染时也能稳定获取目标元素。
• 清理函数的作用：useEffect的返回函数会在组件卸载或依赖项变化时执行，彻底移除事件监听，避免内存泄漏。
• 函数式更新：setIsActionListVisible(prev => false)可以规避闭包陷阱，确保无论回调捕获的状态是否过时，都能正确更新菜单状态。

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