Funciones de flecha de React ES6
Funciones de flecha
Las funciones de flecha nos permiten escribir una sintaxis de función más corta:
Antes:
hello = function() {
return "Hello World!";
}
Con función de flecha:
hello = () => {
return "Hello World!";
}
¡Se hace más corto! Si la función tiene solo una declaración y la declaración devuelve un valor, puede quitar los corchetes y la
returnpalabra clave:
Las funciones de flecha devuelven valor por defecto:
hello = () => "Hello World!";
Nota: Esto funciona solo si la función tiene solo una declaración.
Si tiene parámetros, los pasa dentro de los paréntesis:
Función de flecha con parámetros:
hello = (val) => "Hello " + val;
De hecho, si solo tiene un parámetro, también puede omitir los paréntesis:
¡Obtener la certificación!
$95 INSCRÍBETE
¿Qué pasa this?
El manejo de thistambién es diferente en las funciones de flecha en comparación con las funciones regulares.
En resumen, con las funciones de flecha no hay vinculación de
this.
En las funciones regulares la thispalabra clave representaba el objeto que llamaba a la función, que podía ser la ventana, el documento, un botón o lo que fuera.
Con las funciones de flecha, la thispalabra clave siempre representa el objeto que definió la función de flecha.
Echemos un vistazo a dos ejemplos para entender la diferencia.
Ambos ejemplos llaman a un método dos veces, primero cuando se carga la página y una vez más cuando el usuario hace clic en un botón.
El primer ejemplo usa una función regular y el segundo ejemplo usa una función de flecha.
El resultado muestra que el primer ejemplo devuelve dos objetos diferentes (ventana y botón) y el segundo ejemplo devuelve el objeto de encabezado dos veces.
Ejemplo
Con una función regular, thisrepresenta el objeto que llamó a la función:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Ejemplo
Con una función de flecha, thisrepresenta el objeto de encabezado sin importar quién llamó a la función:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Recuerde estas diferencias cuando trabaje con funciones. A veces, el comportamiento de las funciones regulares es lo que desea, si no, use funciones de flecha.