Eu sei sobre a teoria geral dethis binding (site de chamada de função que importa, ligação implícita, explícita, etc ...) e os métodos para resolver o problema dessa ligação no React, para que ela sempre aponte para o que eu querothis to be (ligação no construtor, funções de seta, etc.), mas estou lutando para obter os mecanismos internos.

Dê uma olhada nestes dois pedaços de código:

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={(e) => this.goToStore(e)}>test</button>
  }
}

vs.

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={this.goToStore}>test</button>
  }
}

O que eu sei é que:

nas duas versões, terminamos com êxito no método goToStore, porque othis dentro derender() O método é automaticamente vinculado (por React) à instância do componenteo primeiro consegue por causa disso,o segundo falha, porque os métodos de classe no es6 não estão vinculados à instância do componente, resolvendo assimthis no método paraundefined

Em teoria, na primeira versão, tanto quanto eu entendo, ocorre o seguinte:

o manipulador de cliques do botão é anônimoseta função, então sempre que eu me refirothis dentro dela, pegathis do meio ambiente (neste caso, derender())então chama ogoToStore método, que é uma função regular.porque a chamada parece se encaixar nas regras da ligação implícita (object.function()) object será o objeto de contexto e, em tais chamadas de função, será usado comothisentão, dentro dogoToStore O método lexicamente escolhido (usado como objeto de contexto) será resolvido corretamente para a instância do componente

Sinto que 3. e 4. não é o caso aqui, porque isso se aplicaria ao caso 2.:

<button onClick={this.goToStore}>test</button>

Também comthis o objeto de contexto.

O que está acontecendo exatamente neste caso específico, passo a passo?