Cuándo usar la función en línea en el evento onClick del botón – Javascript / React.js

Solución:

Rendimiento

Ya sea que use o no funciones de controlador de eventos en línea, esto tiene un impacto en el rendimiento de la aplicación.

Los controladores de eventos en línea son funciones anónimas. Se crean cada vez que se procesa el componente. Es decir, cada vez que llama a setState o cuando el componente recibe nuevos accesorios.

Siempre que un componente está a punto de ser renderizado (cuando el estado se ha actualizado o recibe nuevos accesorios), react realiza una comparación superficial entre el DOM anterior y el DOM nuevo para ese componente. Si se encuentra que tienen accesorios diferentes de los accesorios antes de la actualización de estado, entonces el componente volverá a representar ese componente en particular y todos sus componentes secundarios. Si no es así, asume que el componente es el mismo que el DOM anterior y, por lo tanto, no lo representa.

Ahora las funciones en línea son objetos (las funciones son objetos en javascript). Y cuando reaccionar compara funciones, hace una comparación estricta. Es posible que la función en línea no haya cambiado en su valor, pero es una función completamente diferente (una referencia diferente en la memoria), por lo que React detecta que ha habido un cambio. Y cuando hay un cambio, React vuelve a renderizar el componente y todos sus elementos secundarios.

Una vez más, permítanme decirles que las decisiones de desempeño suelen ser en gran medida compensaciones. Esta explicación no significa que deba eliminar todos los controladores de eventos en línea y definirlos a nivel de clase. Esto puede ralentizar el primer renderizado de su componente debido al enlace que debe realizarse en el constructor. También existe esta cosa llamada optimización prematura que puede conducir a una mala calidad del código o simplemente puede que no valga la pena.

Según la documentación de ReactJS:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Las dos líneas anteriores son equivalentes y utilizan funciones de flecha y Function.prototype.bind respectivamente.

En ambos casos, la e El argumento que representa el evento React se pasará como un segundo argumento después del ID. Con una función de flecha, tenemos que pasarla explícitamente, pero con bind cualquier otro argumento se reenvía automáticamente.

Esto se puede encontrar en la parte inferior de este enlace: https://reactjs.org/docs/handling-events.html

La principal diferencia radica en cómo escribiste tu función. Ejemplos de documentación:

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Y el segundo:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

Pero como puede leer en la documentación, el segundo enfoque es peor desde la perspectiva del rendimiento.

---

---

Utiliza Nuestro Buscador