Funções de seta do React ES6
Funções de seta
As funções de seta nos permitem escrever uma sintaxe de função mais curta:
Antes de:
hello = function() {
return "Hello World!";
}
Com função de seta:
hello = () => {
return "Hello World!";
}
Fica mais curto! Se a função tiver apenas uma instrução e a instrução retornar um valor, você poderá remover os colchetes e a
returnpalavra-chave:
As funções de seta retornam o valor por padrão:
hello = () => "Hello World!";
Nota: Isso funciona apenas se a função tiver apenas uma instrução.
Se você tiver parâmetros, passe-os dentro dos parênteses:
Função de seta com parâmetros:
hello = (val) => "Hello " + val;
Na verdade, se você tiver apenas um parâmetro, também poderá pular os parênteses:
Obter certificação!
$ 95 INSCRIÇÃO
E sobre this?
O manuseio de thistambém é diferente nas funções de seta em comparação com as funções regulares.
Em suma, com funções de seta não há vinculação de
this.
Em funções regulares, a palavra- thischave representava o objeto que chamava a função, que poderia ser a janela, o documento, um botão ou qualquer outra coisa.
Com funções de seta, a palavra- thischave sempre representa o objeto que definiu a função de seta.
Vamos dar uma olhada em dois exemplos para entender a diferença.
Ambos os exemplos chamam um método duas vezes, primeiro quando a página é carregada e novamente quando o usuário clica em um botão.
O primeiro exemplo usa uma função regular e o segundo exemplo usa uma função de seta.
O resultado mostra que o primeiro exemplo retorna dois objetos diferentes (janela e botão) e o segundo exemplo retorna o objeto Header duas vezes.
Exemplo
Com uma função regular, thisrepresenta o objeto que chamou a função:
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);
Exemplo
Com uma função de seta, thisrepresenta o objeto Header, não importa quem chamou a função:
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);
Lembre-se dessas diferenças quando estiver trabalhando com funções. Às vezes, o comportamento de funções regulares é o que você deseja, se não, use funções de seta.