Ao usar a versão ES6 para definir um Componente React,
NÃO
class A extends React.Component {
myFunction() {
// you'd want to use `this` here
}
componentDidMount /* or some react component lifecycle method */() {
// Never do .bind(this) at the place of subscription
SomeEvent.subscribe(this.myFunction.bind(this));
}
componentWillUnmount() {
// because, now this will not work
SomeEvent.unsubscribe(this.myFunction.bind(this));
}
}
FAZ
class B extends React.Component {
constructor(...args) {
super(...args);
// bind it and make it an instance method instead of prototype method
this.myFunction = this.myFunction.bind(this);
}
myFunction() { /* this */ }
componentDidMount() {
SomeEvent.subscribe(this.myFunction);
}
componentWillUnmount() {
SomeEvent.unsubscribe(this.myFunction);
}
}
MAS
const C = React.createClass({
//- - - - - - ^ - the magic happens here
myFunction() {
// this
},
componentDidMount() {
SomeEvent.subscribe(this.myFunction);
},
componentWillUnmount() {
SomeEvent.unsubscribe(this.myFunction);
}
});
Inspirado neste artigo – [ https://www.webreflection.co.uk/blog/2015/10/22/how-to-add-dom-events-listeners ] por
@WebReflection
Isso também é mencionado nos documentos oficiais do React – [ https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding ].