删除事件侦听器 - 我是否需要传递完全相同的匿名函数？

Question

 componentDidMount() {
    window.addEventListener("scroll", (e) => {console.log("Hello"});
  }

 componentWillUnmount() {
    window.removeEventListener("scroll", (e) => {console.log("Hello"});
  }

...我真的需要window.removeEventListener("scroll", (e) => {console.log("Hello")});吗？

或者我可以只做window.removeEventListener("scroll", ()=> {});（带有一个空函数）吗？我不明白为什么在删除 eventListener 时，我需要将完全相同的匿名函数传递给它？

如果我执行window.removeEventListener("scroll", ()=> {console.log("Hello2")}); 会怎样 - 现在这被认为是一个新功能吗？那么这不会删除原来的事件监听器（有console.log("Hello");）吗？

Answer 1

是的，你必须传递完全相同的引用，因为函数是一个对象，而变量持有一个引用，而 function(){} 不等于 function(){}

function stuff(){/* your stuff;*/}
window.addEventListener("event",stuff);
window.removeEventListener("event",stuff);

Answer 2

您的componentWillUnmount 函数不会删除事件侦听器，因为附加在componentDidMount 中的事件侦听器的函数引用与它(compWillUnmount) 尝试删除的函数引用不同。

您可以通过在 chrome 控制台中创建和比较 2 个函数来查看它。

一般来说，在你的类中定义 eventListener 函数并将其附加到componentDidMount 并在componentWillUnmount 中删除它。由于它们只执行一次，所以函数引用保持不变。

class MyComponent extends React.Component {
 ...
 myEventFun = (e) => {console.log("Hello")};

 componentDidMount() {

    window.addEventListener("scroll", this.myEventFun);
  }

 componentWillUnmount() {
    window.removeEventListener("scroll", this.myEventFun);
  }
...

如果你想处理在功能组件中添加/删除事件监听器，see this 和 this