React中移除scroll事件监听器，是否必须传入相同匿名函数？

关于React中移除scroll事件监听器的问题解答 #

嘿，这个问题问到点子上了——本质是JavaScript里事件监听器的匹配逻辑，我给你一步步讲清楚：

1. 为什么移除时必须用完全相同的函数引用？ #

JavaScript的事件系统是通过函数的内存引用来识别要移除的监听器的。每次你写一个匿名函数（比如(e) => {console.log("Hello")}），都是在内存里创建一个全新的函数对象——哪怕两个匿名函数的代码一字不差，它们也是完全独立的引用，浏览器根本认不出它们是“同一个东西”。

所以当你在componentWillUnmount里写另一个匿名函数（不管是空函数、还是代码类似的函数），浏览器找不到对应的监听器，移除操作等于白做。

2. 你的几个具体问题解答 #

• 能不能传空函数()=> {}来移除？
  绝对不行。空函数是一个全新的引用，和你挂载时添加的那个console.log("Hello")的监听器没有任何关联，浏览器找不到要移除的目标，这次移除操作不会有任何效果。

• 传()=> {console.log("Hello2")}会被视为新函数吗？能移除原监听器吗？
  是的，这完全是一个新的函数对象，和原来的监听器引用不匹配。浏览器会把它当成一个完全不同的函数，所以根本移除不了你之前添加的那个console.log("Hello")的监听器。

正确的做法：保存函数引用 #

你需要把回调函数存成组件的实例属性，这样挂载和卸载时用的是同一个引用。比如：

class YourComponent extends React.Component {
  // 把回调函数定义为类的实例方法（用箭头函数自动绑定this，或者手动绑定也可以）
  handleScroll = (e) => {
    console.log("Hello");
  }

  componentDidMount() {
    // 添加监听器时用这个实例方法的引用
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    // 移除时用完全相同的引用
    window.removeEventListener("scroll", this.handleScroll);
  }
}

如果是函数组件，你可以用useCallback来稳定函数引用，配合useEffect进行监听和清理：

import { useEffect, useCallback } from 'react';

function YourComponent() {
  // 用useCallback稳定函数引用
  const handleScroll = useCallback((e) => {
    console.log("Hello");
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    // 清理函数里移除监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [handleScroll]);

  return <div>你的组件内容</div>;
}

总结一下：核心原则就是添加和移除事件监听器必须使用同一个函数引用，任何新创建的函数（哪怕代码看起来一模一样）都无法匹配到原来的监听器，自然也就没法移除它。

内容的提问来源于stack exchange，提问作者R. Kohlisch