React - Versão 19.2

13 - Funções

Nesta aula, vamos aprender a trabalhar com funções no React. As funções são fundamentais para organizar o código e podem ser usadas de várias formas, inclusive para definir comportamentos em eventos.

---

1. Funções Normais vs Arrow Functions

Em React, podemos definir funções de duas formas principais:

• Funções normais: Funções definidas com a palavra-chave function.
• Arrow functions: Funções de forma mais compacta utilizando a sintaxe =>.

Ambas as abordagens são válidas, e o React vai funcionar bem com qualquer uma delas, mas elas têm algumas diferenças no comportamento, especialmente no que diz respeito ao escopo do this.

---

2. Funções normais

As funções tradicionais são declaradas com a palavra-chave function.

// Componente
function Funcoes(){

    function mensagem1 () {
        alert("Mensagem 1");
    }

    return(
        <>
            <button onClick={mensagem1}>
                Clique aqui
            </button>
        </>
    );
}

// Exportar
export default Funcoes;

Explicação:

• A função mensagem1 é definida dentro do componente e chamada no evento onClick
• A função será executada quando o botão for clicado

---

3. Arrow Functions

Arrow functions são mais compactas e frequentemente utilizadas em projetos React, principalmente por sua facilidade de uso em eventos.

function Funcoes(){

    const mensagem2 = () => {
        alert("Mensagem 2");
    }

    return(
        <>
            <button onClick={mensagem2}>
                Clique aqui
            </button>
        </>
    );
}

// Exportar
export default Funcoes;

Explicação:

• A função mensagem2 é definida como uma arrow function
• A função é atribuída a uma constante e chamada diretamente no evento onClick

---

4. Diferença de comportamento entre funções normais e arrow functions

A principal diferença entre funções normais e arrow functions no React é o comportamento do this. Em uma função tradicional, o valor de this pode ser alterado dependendo de como a função é chamada. Já nas arrow functions, o valor de this é sempre o mesmo do contexto em que a função foi criada.

Por exemplo:

// Função normal
function Normal() {
    console.log(this); // O valor de `this` pode variar
}

// Arrow function
const Arrow = () => {
    console.log(this); // `this` permanece o mesmo que o contexto da função
}

Nas aplicações React, as arrow functions são frequentemente preferidas porque garantem que o this não será alterado acidentalmente.

---

5. Usando funções com parâmetros

Podemos passar parâmetros para funções também:

function FuncoesComParametros(){

    const mostrarMensagem = (nome) => {
        alert(`Olá, ${nome}!`);
    }

    return(
        <>
            <button onClick={() => mostrarMensagem("Ralf")}>
                Clique aqui
            </button>
        </>
    );
}

// Exportar
export default FuncoesComParametros;

Explicação:

• Usamos a função mostrarMensagem para exibir uma mensagem personalizada
• Passamos o parâmetro nome quando chamamos a função dentro do evento onClick

---

Dicas importantes

• Funções normais e arrow functions são ambas úteis. Escolha a que fizer mais sentido no seu código.
• Em React, é comum usar arrow functions para manipulação de eventos e manter o código mais limpo.
• Se você precisar de mais controle sobre o this, use funções normais, mas em componentes React, a maioria dos casos é resolvida com arrow functions.

Agora você sabe como trabalhar com funções no React.

Acomapanhe o vídeo abaixo para implementar os passos utilizados nessa etapa do treinamento: