Tratando de descubrir los conceptos básicos de React.
Mirando el segundo ejemplo en esta página: https://facebook.github.io/react/ Veo que la función tick() establece el estado de la clase Timer, incrementando el valor anterior en uno.
class Timer extends React.Component { constructor(props) { super(props); this.state = {secondsElapsed: 0}; } tick() { this.setState((prevState) => ({ secondsElapsed: prevState.secondsElapsed + 1 })); } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } } ReactDOM.render(<Timer />, mountNode);Sin embargo, cuando traté de implementar mi propia clase Counter simple, falló y recibí un error de consola que decía No se puede leer la propiedad setState of undefined.
class Counter extends React.Component { constructor(props) { super(props); this.state = {count: 0}; } increment(prevState) { this.setState((prevState) => ({ count: prevState.count + 1 })); } render() { return ( <div className="main"> <button onClick={this.increment}>{this.state.count}</button> </div> ) } }Algunas búsquedas en Google revelan que tengo que vincular esto a la función de incremento. Pero, ¿por qué no se requería eso en el primer ejemplo que vi? Copié el código en CodePen y funcionó bien con React 15.3.1. No puedo encontrar nada parecido a un enlace en ese ejemplo. Solo después de agregar el código de enlace en el constructor, las cosas comenzaron a funcionar en mi ejemplo.
class Counter extends React.Component { constructor(props) { super(props); this.state = {count: 0}; // THIS ONE LINE FIXED THE ISSUE this.increment = this.increment.bind(this); } increment(prevState) { this.setState((prevState) => ({ count: prevState.count + 1 })); } render() { return ( <div className="main"> <button onClick={this.increment}>{this.state.count}</button> </div> ) } }Respondiendo a su pregunta: el primer ejemplo usa arrow functions , que realiza automáticamente el enlace de contexto . De los documentos:
Una función de flecha no crea su propio este contexto, por lo que tiene su significado original del contexto adjunto.
De hecho, hay algunas formas de enlazar en React:
1) puede vincular todas las funciones en su constructor, como dijo:
constructor(props) { /* ... */ this.increment = this.increment.bind(this); }2) invoque sus devoluciones de llamada con funciones de flecha:
<button onClick={(e) => this.increment(e)}> 3) agregue .bind al final de la referencia de su método cada vez que lo configure como una devolución de llamada, así:
<button onClick={this.increment.bind(this)}>4) En tu clase, define el método con funciones de flecha:
increment = (e) => { /* your class function defined as ES6 arrow function */ } /* ... */ <button onClick={this.increment}>Para usar esta sintaxis con babel, debe habilitar este complemento o usar el ajuste preestablecido de la etapa 2 .
Si observa detenidamente la forma en que se ha llamado a la función tick() en su primer ejemplo, comprenderá que se le ha especificado el enlace cuando se llama usando las arrow functions . Si hace lo mismo con la función de incremento, también funcionará. Estas son solo diferentes formas de vincular las funciones.
Entonces, como se le preguntó, no es que en el primer ejemplo no se especifique ningún enlace mientras que el segundo lo requiere, sino que en ambos casos está enlazando solo que la forma de enlace es diferente para ambos casos.
class Counter extends React.Component { constructor(props) { super(props); this.state = {count: 0}; } increment(prevState) { this.setState((prevState) => ({ count: prevState.count + 1 })); } render() { return ( <div className="main"> <button onClick={() => this.increment()}>{this.state.count}</button> </div> ) } } ReactDOM.render(<Counter/>, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>