Artigo original: https://www.freecodecamp.org/news/a-few-questions-on-functional-components/
Você já se perguntou como criar um componente no React?
A resposta é tão simples quanto criar uma função retornando uma sintaxe semelhante a HTML.
import React from 'react';
function Counter({n}) {
return (
<div>{n}</div>
);
}
export default Counter;Vamos ver o que acontece no código acima. Counter é uma função que transforma um número em HTML. Se você olhar com mais cuidado, Counter é uma função pura. Isso mesmo, o tipo de função que retorna o resultado com base em suas entradas e não tem efeitos colaterais.
Essa explicação vem com uma nova pergunta: o que é um efeito colateral?
Resumidamente, um efeito colateral é qualquer modificação no ambiente fora da função ou qualquer informação lida do ambiente externo que possa mudar.
Você deve ter notado que usei a sintaxe de atribuição de desestruturação na lista de parâmetros para extrair o número de entrada n. Isso ocorre porque os componentes tomam como entrada um único objeto chamado "props", que tem todas as propriedades enviadas a eles.
Aqui está como o parâmetro n pode ser definido a partir de qualquer outro componente:
<Counter n={1} />De certo modo, essa sintaxe pode ser imaginada como uma função chamada Counter({n: 1}). Não é isso?
Vamos seguir em frente.
Os componentes funcionais podem ter um estado? Como o nome do componente sugere, quero armazenar nele e alterar um contador. Se apenas declararmos uma variável contendo um número dentro do componente, o que ocorre? Vai funcionar?
Vamos descobrir.
Começarei declarando a variável dentro do componente funcional.
import React from 'react';
function Counter() {
let n = 0;
return (
<div>{n}</div>
);
}
export default Counter;Agora, vamos adicionar a função que incrementa o número e o registra no console (usando console.log). Usarei a função como manipulador de eventos para o evento de clique.
import React from 'react';
function Counter() {
let n = 0;
function increment(){
n = n + 1;
console.log(n)
}
return (
<div>
<span>{n}</span>
<button onClick={increment}>Increment </button>
</div>
);
}
export default Counter;Se olharmos para o console, vemos que o número é realmente incrementado, mas isso não é refletido na tela. Alguma ideia?
Você acertou em cheio... Precisamos mudar o número, mas também precisamos renderizá-lo novamente na tela.
Aqui é onde a função utilitária dos React Hooks entra em cena. A propósito, essas funções utilitárias são chamadas de hooks e começam com a palavra "use". Vamos usar um deles, useState. Vou registrar também o texto "re-render" no console para ver quantas vezes a função Counter é realmente chamada.
import React, { useState } from 'react';
function Counter() {
const [n, setN] = useState(0);
console.log('re-render');
function increment(){
setN(n + 1);
console.log(n)
}
return (
<div>
<span>{n}</span>
<button onClick={increment}>Increment </button>
</div>
);
}
export default Counter;Vamos ler sobre o que faz o useState().
O que useState retorna? Ele retorna dois valores: o estado atual e uma função que o atualiza.
Em nosso caso, n é o estado atual e setN() é a função que o atualiza. Você conferiu o console para ver quantas vezes o texto "re-render" é exibido? Descubra por conta própria.
Podemos atualizar o estado não apenas definindo o novo valor, mas fornecendo uma função que retorna o novo valor.
Em nosso caso, a função que fornece o novo valor será chamada de increment(). Como você pode ver, increment() é uma função pura.
import React, { useState } from 'react';
function increment(n){
return n + 1;
}
function Counter() {
const [n, setN] = useState(0);
return (
<div>
<span>{n}</span>
<button
onClick={() => setN(increment)}>
Increment
</button>
</div>
);
}
export default Counter;Para entender o que faz setN(increment), vamos ler a documentação.
Passar uma função de atualização permite que você acesse o valor do estado atual dentro da função de atualização.
Certo. Então, increment() é chamada com o estado atual n e é usada para calcular o novo valor do estado.
Conclusão
Vamos resumir o que encontramos.
No React, podemos simplesmente definir um componente usando uma função que retorna uma sintaxe semelhante a HTML.
Os React Hooks nos permitem definir o estado em tais componentes funcionais.
Por fim, mas não menos importante, finalmente nos livramos desse pseudoparâmetro nos componentes. Talvez você tenha notado que isso se torna irritante ao mudar o contexto quando você não espera. Não se preocupe com isso. Não vamos usar isso em componentes funcionais.
Se você chegou até aqui, também pode dar uma olhada nos livros do autor (em inglês).
Discover Functional JavaScript foi considerado um dos melhores livros sobre programação funcional pela BookAuthority!
Para saber mais sobre técnicas de programação funcional no React, dê uma olhada em Functional React.
Aprenda React funcional, a partir de projetos, com Functional Architecture with React and Redux.