javascript React,removeEventListener和bind(this)gotcha

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript React,removeEventListener和bind(this)gotcha相关的知识,希望对你有一定的参考价值。

/*  Sometimes it's pretty easy to run ito troubles with React ES6 components.
    Consider the following code: */

class EventStub extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize.bind(this));
  }
  
  onResize() {
    this.setState({width: this.div.offsetWidth});
  }
  
  render() { return null; }
}

/*  As a result EventListener won't be removed since A new function reference is created after .bind() is called. 
(more http://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind 
and http://alexfedoseev.com/post/65/react-event-handlers-and-context-binding). 
Obviously this is not React's fault, it's how DOM works, but it's super easy to make a mistake. ESLint rule anyone?

What about solutions? Pretty straightforward one is to create bound funciton only once in constructor,
assign to internal prop and then use it:*/
this.bound_onResize = this.onResize(bind);

//or replace the funtion with the bound one that allows to use same funtion: 
this.onResize = this.onResize.bind(this);

//another options is to use arrow funciton on a class level so it'll capture "this" automatically, 
//but this is as of Jan 2016 Stage 2 ES2016 (ES7) proposal and requires "babel experimental" flag
export class MyComponent extends Component { 
    onResize = () => this.onResize()
}

以上是关于javascript React,removeEventListener和bind(this)gotcha的主要内容,如果未能解决你的问题,请参考以下文章

itemStateChanged中的removeEvent ItemListener(removeItemListener)不起作用(StackOverfowError)

Javascript DOM添加/删除事件[重复]

学习 React 需要具备的 JavaScript 知识

如何使用 React Hook 在 React 组件中引用和加载 Javascript 文件

javascript React-router启动码#react

javascript [React snippets]来自Udacity Nanodegree #React