¿Cómo evitar la necesidad de vinculación en ReactJS?

En ReactJs, cuando estamos trabajando con componentes basados ​​en clases y queremos acceder a esto dentro de un método de clase. Esto tendrá que atarlo. Vincular esto le permite acceder al estado y establecer el estado dentro de la clase. 

Para evitar la necesidad de vincular, hemos introducido algo en ES6 como funciones de flecha. El uso de la función de flecha para llamar a this.setState evitará el uso de bind. Cuando usamos la función de flecha, funciona por las siguientes razones:

• No modifica el alcance de esto, por lo que no es necesario vincularlo en el constructor de la clase.
• JavaScript tiene funciones de primera clase, lo que significa que las funciones se consideran datos. Por lo tanto, las funciones de flecha se pueden asignar a las propiedades de clase.

Vamos a crear una aplicación en reaccionar para ver cómo se implementa:

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Estructura del proyecto: se verá así

estructura del proyecto

Ejemplo: por lo general, cuando desea acceder a esto dentro de un método de clase, debe vincularlo a su método de la siguiente manera:

import React, { Component } from "react";
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ clicked: true });
  }
  render() {
    return (
      <div
        style={{
          backgroundColor: this.state.clicked ? "blue" : "green",
          height: "100vh",
          width: "100vw",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          fontSize: "50px",
          fontWeight: "bold",
          fontFamily: "sans-serif",
          cursor: "pointer",
        }}
        onClick={this.handleClick}
      >
        Click Me!
      </div>
    );
  }
}

Para eliminar la declaración de vinculación del código superior, actualice su archivo  App.js como:

import React, { Component } from "react";
  
export default class App extends Component {
  state = { clicked: false };
  handleClick = () => this.setState({ clicked: true });
  render() {
    return <div style={
        {
            backgroundColor: this.state.clicked ? "blue" : "green",
            height: "100vh",
            width: "100vw",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            fontSize: "50px",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            cursor: "pointer"
        }
    } onClick={this.handleClick}>Click Me!</div>;
  }
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Salida: En el componente basado en clases anterior, estamos usando la función de flecha en el clic del controlador.

Producción