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

Question

I'm using static methods to implement my listener functions. Example:

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)
  }
}

The listener adds fine, however, when unmounting the component, the function doesn't seem to get removed, and still triggering my static method. I thought this.constructor.listenerFunc === this.constructor.listenerFunc since it's a class method, but in my example it doesn't seem so. What am I missing?

UPDATE

I updated my code. My listener function actually calls another static method heavyCalculation . This is where it mess things up.

Answer 1

The third argument is mandatory.

See: removeEventListener is not working

Also, make sure that you've bound this to your function.

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

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

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

See: I can't seem to reliably remove a listener using componentWillUnmount

Answer 2

I'm not sure whether it's my babel transpiler or React itself but I solved it using the classname. Here's my updated code:

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)
  }
}

So instead of calling this.heavyCalculation() I used MyComponent.heavyCalculation() . Solves it.