Cuando tienes que usarthis palabra clave dentro de un controlador de eventos, debe vincular la función (controlador de eventos) conthis kerword. De lo contrario, debe usarla función de flecha.

p.ej

//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
    this.setState({
      isClicked:true
    });
}

render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
}

Sin embargo, con el enfoque anterior, no puede pasar un parámetro. Necesitas usar cualquiera ...

bind(this, param) después de la funciónla función de flecha anónima

es decir

<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>

Aquí está la pregunta.

Cuál es la forma más eficiente de pasar un parámetro a un controlador de eventos?

De acuerdo ael documento oficial, utilizandobind() puede socavar el rendimiento, porque ...

Utilizar Function.prototype.bind en render crea una nueva función cada vez que el componente representa

Lo mismo ocurre con el uso de la función de flecha anónima. El doctor dice que ...

El uso de una función de flecha en render crea una nueva función cada vez que el componente renderiza

Entonces, ¿cuál será la forma más eficiente de pasar un parámetro?

Cualquier contribucion sera apreciada

P

Algunas personas han preguntado cómoparam está determinado. Esto se determinará dinámicamente (es decir, no siempre111). Por lo tanto, puede ser de estados, accesorios u otras funciones definidas en esta clase.