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绑定到您的功能。

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

Answer 2

我不确定这是我的babel转换器还是React本身，但是我使用classname解决了它。这是我更新的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
  <h3>Title</h3>
</div>

因此，我使用class MyComponent extends Component { static heavyCalculation() { console.log('Calculating') } static listenerFunc() { console.log('Resize') MyComponent.heavyCalculation() } componentDidMount() { window.addEventListener('resize', this.constructor.listenerFunc, false) } componentWillUnmount() { window.removeEventListener('resize', this.constructor.listenerFunc, false) } }而不是调用this.heavyCalculation()。解决它。

使用静态方法删除componentWillUnmount上的侦听器

更新

2 个答案: