reactjs - Reaccionar: ¿se llama al controlador onClick en cada render?

Question

Estoy aprendiendo React, y seguí este tutorial para crear un juego simple de Tic-Tac-Toe que puedes ver aquí en CodePen.

Estoy confundido acerca de cómo funciona la función de flecha en la propiedad onClick del componente Square que se devuelve dentro de la función renderSquare del componente Board: onClick={() => this.props.onClick(i)} . Y también de nuevo de manera similar el componente Juego donde tengo onClick={ (i) => this.handleClick(i)} . Supuse que podría escribirlo sin la función de flecha (al igual que onClick={this.handleClick(i)} ) pero esto rompe el juego.

Answer 1

onClick espera una función. Una función de flecha no tiene su propio this ; Se utiliza this valor del contexto de ejecución adjunto. La función de flecha es un reemplazo para lo siguiente

onClick={this.handleClick.bind(this,i)}

No funciona cuando lo ejecutas como

onClick={this.handleClick(i)} 

porque en este caso llamará a una función y pasará un valor de retorno que se evaluará cada vez que se llame render. Por lo tanto, si está haciendo algo en la función onClick que provoca un cambio, por ejemplo, setState su aplicación irá en un bucle sin fin. Por lo tanto, onClick necesita una función y no un valor, por lo que, a menos que devuelva una función desde el controlador onClick , no debe llamarla directamente.

La función de flecha anterior realiza la función de vincular el parámetro a la función