Uso de funciones de flecha en componentes React

1. Funciones de flecha en los componentes de la clase React
2. Funciones de flecha en componentes funcionales de React
3. Sintaxis de la función de flecha en React
4. Ventajas de usar la función de flecha en React

Las funciones de flecha son una adición reciente a JavaScript, pero ya han cambiado la forma en que millones de desarrolladores escriben código JavaScript.

Como sabrá, las aplicaciones web React se componen de múltiples componentes. A menudo, los componentes se reutilizan; por ejemplo, una tienda de comercio electrónico puede tener varias instancias de un componente secundario <Producto>.

Funciones de flecha en los componentes de la clase React

React le permite definir componentes usando la sintaxis de clase. Si desea utilizar la palabra clave this en React, debe vincularla en el constructor; de lo contrario, las funciones normales que hacen referencia a la palabra clave this devolverán undefined.

Código:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e) {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Log to the console</button>;
  }
}

Si necesita hacer referencia a la palabra clave this en funciones regulares, deberá vincularla al constructor. Si no hace esto, la función handleClick() no registrará el componente Aplicación en la consola pero será indefinido.

Las funciones de flecha en los componentes de clase funcionan de manera diferente. Usar la palabra clave this es mucho más sencillo.

La palabra clave se refiere al entorno donde existe la función de flecha, el propio componente <App>. Por ejemplo, una pequeña reescritura del componente anterior puede cambiar significativamente su comportamiento:

Código:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <button onClick={(e) => console.log(this)}>Log to the console</button>
    );
  }
}

Si abre la demostración en vivo en CodeSandbox y hace clic en el botón, verá que la consola muestra el componente de clase.

Funciones de flecha en componentes funcionales de React

Los componentes funcionales no tienen la palabra clave this, por lo que la distinción entre la flecha y la sintaxis normal es mucho menor. En los componentes funcionales, las funciones de flecha son una forma más limpia y sucinta de escribir controladores de eventos en React.

Esta función se usa a menudo en componentes funcionales para escribir controladores de eventos en línea en JavaScript. Veamos un ejemplo:

export default function App() {
  return (
    <div className="App">
      <button onClick={() => alert("hello!")}>Create an alert</button>
    </div>
  );
}

También puede almacenar funciones de flecha en una variable y pasar estos controladores de eventos como “accesorios”.

export default function App() {
  const handler = () => console.log("An example string");
  return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

También es posible escribir el componente funcional como una función de flecha.

const App = () => {
    return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

Sintaxis de la función de flecha en React

React es una biblioteca basada en JavaScript. Entonces, puede usar funciones de flecha fuera de JSX.

La sintaxis para usar funciones de flecha en los componentes de React es bastante simple. Veamos un ejemplo simple de funciones de flecha que no toman ningún argumento y devuelven una expresión:

const arrowFunction = () => 2+2

En este caso, almacenamos una referencia a nuestra definición de función en la variable arrowFunction.

La función no toma ningún parámetro, por lo que usamos un paréntesis vacío (), seguido de una flecha => entre los argumentos de la función y su cuerpo. Si el cuerpo de la función es solo una expresión en una línea, no necesita usar llaves para separar el cuerpo de la función.

Además, no es necesario que escriba explícitamente la instrucción return; esta implicado. La función anterior devuelve el resultado de la expresión 2+2.

Al pasar un parámetro

La sintaxis de las funciones de flecha sigue el patrón descrito anteriormente, con pequeñas diferencias. Veamos un ejemplo:

const arrowFunction = argument => argument+2

Cuando pasa solo un parámetro, puede envolverlo con paréntesis u omitir su uso. De cualquier manera, la función de flecha funcionará.

Al pasar dos o más parámetros

Cuando pasa varios parámetros, debe envolverlos con un paréntesis.

const arrowFunction = (argumentOne, argumentTwo) => argumentOne+argumentTwo

Podría tener una matriz con muchos elementos y pasarlos todos a la vez usando el operador de propagación:

const args = [5,10]
const arrowFunction = (...args) => argumentOne+argumentTwo

Cuando se usan varias declaraciones

Ahora, veamos las funciones de flecha que son un poco más complejas. El cuerpo de la mayoría de las funciones que escribe en React contiene varias declaraciones en varias líneas.

Al escribir funciones de flecha con varias declaraciones, debe encerrar el cuerpo de la función con llaves:

const arrowFunction = (argumentOne, argumentTwo) => {
    console.log("doing calculation")
    return argumentOne+argumentTwo
    }

En este caso, también debe escribir explícitamente la declaración de retorno.

Ventajas de usar la función de flecha en React

Las funciones de flecha tienen muchas ventajas en React. Quizás lo más importante es que proporcionan una sintaxis más sencilla para crear componentes funcionales en React; puede usar funciones de flecha para definir un componente simple en cuestión de minutos.

Las funciones de flecha también son fáciles de usar como devoluciones de llamada en componentes de clase. A menudo evitan errores asociados con la palabra clave this porque las funciones de flecha no cambian el valor de this dentro del cuerpo de su función; siempre se refiere a una instancia de la clase.

De lo contrario, las funciones de flecha ofrecen ahorros de tiempo para escribir muchos controladores de eventos en línea simples y funciones de devolución de llamada.