Cuando se vincula un método en el constructor de la clase React, ¿cómo ve el valor de la propiedad que se vincula? Si el constructor es lo primero que se ejecuta, entonces, cuando la propiedad handleClick se vincula a la instancia del componente a continuación, ¿cómo sabe cuál será el valor de handleClick ya que no está definido hasta después del constructor.
Entonces, me pregunto si el constructor se ejecuta primero, ¿es consciente de que se ha definido un método llamado handleClick y, de ser así, cómo se define después del constructor?
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } }Se llama elevación https://stackabuse.com/hoisting-in-javascript . Puedes encontrar un montón de ejemplos en el artículo que adjunto.
¿Qué quieres decir con que serían indefinidos? cuando define una clase e implementa sus métodos, la clase "sabe" qué atributos y propiedades tiene.
hay algo que se llama ejecución de contexto, para este propósito digamos que es this , en otras palabras, es el objeto que se ejecuta en el ámbito actual.
si tienes un componente como este.
class Button extend Component { constructor (props) { super(props); } handler () { // ... } render () { return ( <button onClick={this.handler} >Click</button> ) } } que crea un botón. Cuando el usuario hace clic en el botón, ejecuta el handler de métodos, ahora permítame preguntarle qué es this que está ejecutando el handler .
¿el usuario? ¿el botón? ¿la ventana?
onClick es un detector de eventos, es una reacción desencadenada cada vez que el usuario interactúa con la ventana. entonces, quien llama a la función onClick no es el botón, sino la ventana. el método del controlador del botón no es más que un envoltorio de la función original, por lo que el contexto está debajo de la ventana, por eso, cuando se refiere a otras cosas del botón de clase, todo está indefinido porque está buscando esas cosas en el objeto de la ventana.
this.handler = this.handler.bind(this);
solo especifica quien va a ser this , pero no me crean solo soy un mortal.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
que aprender mas mira esto: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
Es por el izado, en realidad es la especialidad del constructor en la clase, puedes despejar tu duda entendiendo al constructor. visite aquí para una explicación fácil: 'https://ponyfoo.com/articles/binding-methods-to-class-instance-objects'