Sé sobre la teoría general dethis enlace (función llamada sitio lo que importa, enlace implícito, explícito, etc.) y los métodos para resolver el problema de este enlace en React para que siempre apunte a lo que quierothis ser (vinculante en el constructor, funciones de flecha, etc.), pero estoy luchando por obtener los mecanismos internos.

Eche un vistazo a estas dos piezas 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>
  }
}

Lo que sé es que:

en ambas versiones terminamos con éxito en el método goToStore, porque elthis dentro derender() el método se vincula automáticamente (por React) a la instancia del componenteel primero tiene éxito por eso,el segundo falla, porque los métodos de clase en es6 no están vinculados a la instancia del componente, resolviendo asíthis en el método paraundefined

En teoría, en la primera versión, hasta donde yo entiendo, ocurre lo siguiente:

el controlador de clic de botón es anónimoflecha función, así que cada vez que hago referenciathis dentro de él, se recogethis del medio ambiente (en este caso derender())entonces llama algoToStore método, esa es una función regular.porque la llamada parece ajustarse a las reglas de enlace implícito (object.function()) object será el objeto de contexto y en tales llamadas a funciones se usará comothisentonces, dentro delgoToStore método el léxico recogido esto (utilizado como un objeto de contexto) se resolverá a la instancia del componente correctamente

Siento que 3. y 4. no es el caso aquí, porque entonces se aplicaría al caso 2.:

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

También conthis El objeto de contexto.

¿Qué está sucediendo exactamente en este caso particular, paso a paso?