React Hooks中window滚动事件监听失效问题求助

我来帮你分析一下这个问题，其实是几个小细节没处理好导致的，咱们一步步来解决：

问题根源 #

1. 函数声明顺序问题：你用const定义的handleScroll是箭头函数，箭头函数不会像函数声明那样被提升。当组件首次渲染时，useEffect会先执行，此时handleScroll还没被初始化，相当于给window绑定了一个undefined的监听函数，自然不会触发。
2. 缺少监听清理逻辑：你没有在useEffect中返回清理函数，组件卸载后监听依然会存在，不仅可能造成内存泄漏，还可能导致其他奇怪的问题。
3. Ref访问方式错误：你直接console.log(Position)只会打印Ref对象本身，要获取到对应的DOM元素，需要访问它的current属性。

修正后的代码方案一：调整函数顺序+添加清理逻辑 #

import React, { useEffect, useState, useRef } from 'react';
import './Navbar.scss';
const Navbar = () => {
  const [scrollY, setScrollY] = useState(0);
  const Position = useRef(null);

  // 先定义handleScroll，确保useEffect执行时能拿到正确的函数引用
  const handleScroll = () => {
    console.log(Position.current); // 正确访问Ref的DOM元素
    setScrollY(window.scrollY);
  }

  useEffect(() => {
    // 绑定滚动监听
    window.addEventListener('scroll', handleScroll);
    
    // 清理函数：组件卸载或依赖变化时移除监听
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]); // 将handleScroll加入依赖数组，函数变化时重新绑定

  return (
    <div className="row">
      <div className="col-lg-12 p-0">
        <div className="Navbar" ref={Position}>
          <ul>
            <li><a href="/us">KDN</a></li>
            <li><a href="/">Posts</a></li>
            <li><a href="/">Talk </a></li>
            <li><a href="/jobs">Jobs</a></li>
          </ul>
        </div>
      </div>
    </div>
  );
};
export default Navbar;

优化方案：用useCallback稳定函数引用 #

如果handleScroll的逻辑不会频繁变化，可以用useCallback缓存函数引用，避免每次组件渲染都解绑和重新绑定监听，提升性能：

import React, { useEffect, useState, useRef, useCallback } from 'react';
import './Navbar.scss';
const Navbar = () => {
  const [scrollY, setScrollY] = useState(0);
  const Position = useRef(null);

  // 用useCallback包裹，依赖为空时函数引用始终稳定
  const handleScroll = useCallback(() => {
    console.log(Position.current);
    setScrollY(window.scrollY);
  }, []); // 如果函数用到其他状态/props，一定要加入依赖数组

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    <div className="row">
      <div className="col-lg-12 p-0">
        <div className="Navbar" ref={Position}>
          <ul>
            <li><a href="/us">KDN</a></li>
            <li><a href="/">Posts</a></li>
            <li><a href="/">Talk </a></li>
            <li><a href="/jobs">Jobs</a></li>
          </ul>
        </div>
      </div>
    </div>
  );
};
export default Navbar;

关键注意点 #

• 如果handleScroll中用到了组件的状态或props，一定要把这些变量加入useCallback的依赖数组，否则会出现闭包问题，拿到的是变量的旧值。
• 始终记得在useEffect中清理监听事件，这是React Hooks开发的最佳实践，能避免很多内存泄漏问题。

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