8

Utilizando ES5 no desenvolvimento com ReactJS, um componente pode ser declarado da seguinte forma:

var MyComponent = React.createClass({
  alertSomething: function(event) {
    alert(event.target);
  },

  render: function() {
    return (
      <button onClick={this.alertSomething}>Click Me!</button>
    );
  }
});

ReactDOM.render(<MyComponent />);

Neste exemplo o this referencia o próprio objeto, que é o comportamento natural esperado. Minha dúvida é quanto se utiliza ES6 para criar componentes.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  alertSomething(event) {
    alert(event.target);
  }

  render() {
    return (
      <button onClick={this.alertSomething.bind(this)}>Click Me!</button>
    );
  }
}

ReactDOM.render(<MyComponent />);

Sabendo que em JavaScript o this referencia o próprio objeto instanciado quando se usa o operador new, alguém sabe me dizer qual a real finalidade de se usar bind? É algo relacionado aos mecanismos internos do React?

2 Respostas 2

8

this dinâmico

O bind resolve um problema causado pelo contexto do JavaScript, ele provê uma maneira de garantir que mesmo desacoplando uma função de um objeto o comportamento dele continue o mesmo, garantindo assim uma integridade do comportamento da função. Isso é interessante no caso de programação funcional, onde o ideal é termos funções puras, que possuem como parte de sua ideologia ser uma função sem efeito colateral. Um exemplo do problema:

function Usuario() {
  this._nome = '';

  this.setNome = function(nome) {
    this._nome = nome;
  };

  this.getNome = function() {
    return this._nome;
  };
}

var johnDoe = new Usuario();

johnDoe.setNome('John Doe');

console.log(johnDoe.getNome()); // 'John Doe'

Aqui temos uma simples função construtora que serve para representar a entidade de usuários no nosso sistema. Note que ela não usa de bind, e por estarmos usando o objeto johnDoe, o contexto da função não sofre com problema algum. Os problemas de não se usar um bind (ou outra solução) nesse caso só aparecem quando desacoplamos a função do objeto.

var johnDoe = new Usuario();
var setNome = johnDoe.setNome;
setNome('John Doe');

console.log(johnDoe.getNome()); // ''
console.log(window._nome)); // 'John Doe'

Quando desacoplamos uma função para uma variável, o contexto da função passa a ser o contexto global, então o seu comportamento é totalmente quebrado. Note que o problema também ocorre quando você passa a função como parâmetro para outra função.

var johnDoe = new Usuario();

function popularNome(setNome) {
  setNome('John Doe');
}

popularNome(johnDoe.setNome);

console.log(johnDoe.getNome()); // ''
console.log(window._nome)); // 'John Doe'

Quando trabalhamos com eventos do DOM, onde registramos uma função para escutar um evento também temos um problema similar, isso porque o contexto da função é modificado na chamada pelo escutador de eventos. Quando a função registrada em um evento é chamado, o escopo da função passa a ser o elemento que acionou a ação. Como o onClick é um evento, se o bind não fosse feito, ele teria esse problema:

var usuario = {
  _nome: '',
  setNome: function(event) {
    this._nome = event.target.value;
  }
};

var elNome = document.getElementById('nome');

// O contexto da função setNome seria
// equivalente ao "elNome"
elNome.addEventListener('keyup', usuario.setNome);

Exemplo do problema: https://jsfiddle.net/fvenq166/

5

Como a resposta do Gabriel já está bem completa, vou deixar aqui uma dica (que não responde a pergunta - deixando claro desde já) que facilita muito o uso do React em ES6.

Em vez de utilizarmos method definitions para declararmos nossos métodos, podemos declará-los como propriedades usando arrow functions, que já fazem com que o método vincule lexicamente o this, fazendo com que independente de como/onde seja chamado, utilizará o this da classe.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  alertSomething = (event) => {
    alert(event.target);
  };

  render() {
    return (
      <button onClick={this.alertSomething}>Click Me!</button>
    );
  }
}

ReactDOM.render(<MyComponent />);

Observação: a declaração de propriedades fora do constructor é chamada de Class Instance Field e ainda está em Stage 1 para ser considerada standard. Para declarar as propriedades dessa forma desde já, você precisará de um transpilador como o TypeScript ou o Babel (com Stage 1 ativado).

Caso não queria fazer isso, pode declará-la dentro do construtor, utilizando o this antes:

constructor(props) {
  super(props);
  this.alertSomething = (event) => {
    alert(event.target);
  };
}

Uma observação final: no seu exemplo, mesmo se não utilizar o bind no ES6, tudo vai funcionar perfeitamente bem, você só terá problemas quando quiser/tiver que usar o this.

1
  • 1
    +1 por causa da citação de Class Instance Field Commented 8/05/2016 às 1:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .