A maneira certa de vincular métodos personalizados no Componente de React de Classe ES6

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 ].