javascript - 使用静态方法删除 componentWillUnmount 上的监听器

Question

我正在使用静态方法来实现我的监听器功能。示例:

class MyComponent extends Component {
  static heavyCalculation() { console.log('Calculating') }

  static listenerFunc() { console.log('Resize'); this.heavyCalculation() }
  
  componentDidMount() {
    window.addEventListener('resize', this.constructor.listenerFunc, false)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.constructor.listenerFunc, false)
  }
}

监听器添加得很好，但是，当卸载组件时，该函数似乎没有被删除，并且仍然触发我的静态方法。我认为 this.constructor.listenerFunc === this.constructor.listenerFunc 因为它是一个类方法，但在我的示例中似乎并非如此。我错过了什么？

更新

我更新了我的代码。我的监听器函数实际上调用另一个static 方法heavyCalculation。这就是事情变得困惑的地方。

Answer 1

第三个参数是强制性的。

参见:removeEventListener is not working

此外，请确保您已将 this 绑定(bind)到您的函数。

componentDidMount() {
  window.addEventListener('resize', this.constructor.listenerFunc, false)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.constructor.listenerFunc, false)
}

this.constructor.listenerFunc = this.constructor.listenerFunc.bind(this)

参见:I can’t seem to reliably remove a listener using componentWillUnmount