import React from 'react';function Counter({n}) {  return (    
{n}
  );}export default Counter;

Agora vamos ver o que aconteceu. Counter é uma função que transforma um número em HTML. E 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?

Em resumo, um efeito colateral é qualquer modificação no ambiente fora da função ou qualquer informação de leitura do ambiente externo que possa ser alterada.

Você deve ter notado que eu usei o sintaxe de atribuição de desestruturação na lista de parâmetros para extrair o n número de entrada. Isso ocorre porque os componentes recebem como entrada um único objeto chamado “adereços” que possui todas as propriedades enviadas a eles. Aqui está como o n O parâmetro pode ser definido a partir de qualquer outro componente:

Em certo sentido, essa sintaxe pode ser imaginada como uma chamada de função Counter({n: 1}). Não é mesmo?

Vamos continuar nossa jornada

Componentes funcionais podem ter estado? Como o nome do componente sugeriu, gostaria de armazenar e alterar um contador. E se apenas declararmos uma variável que contém um número dentro do componente? será que vai dar certo?

Vamos descobrir.

Começarei declarando a variável dentro do componente funcional.

import React from 'react';function Counter() {  let n = 0;  return (    
{n}
  );}export default Counter;

Agora vamos adicionar a função que incrementa o número e o registra no console. Usarei a função como manipulador de eventos para o evento click.

import React from 'react';function Counter() {  let n = 0;    function increment(){    n = n + 1;    console.log(n)  }    return (      
        {n}              
  );}export default Counter;

Se olharmos para o console, vemos que o número é realmente aumentado, mas isso não é refletido na tela. Alguma ideia?

Você acertou … precisamos alterar o número, mas também precisamos renderizá-lo novamente na tela.

Aqui é onde a função utilidade de Ganchos de reação entra em jogo. A propósito, essas funções utilitárias são chamadas de ganchos e começam com a palavra “use”. Nós vamos usar um deles, useState. Também registrarei o texto “re-renderizar” no console para ver quantas vezes o Counter função é 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 (    
        {n}            
  );}export default Counter;

Vamos ler o que useState() faz.

O que useState Retorna? Ele retorna um par de valores: o estado atual e uma função que o atualiza.

No nosso caso n é o estado atual e setN() é a função que o atualiza. Você verificou o console e viu quantas vezes o texto “re-renderizar” é exibido? Vou deixar isso para você descobrir.

Podemos atualizar o estado não apenas definindo o novo valor, mas também fornecendo uma função que retorna o novo valor.

No nosso caso, a função que fornece o novo valor será chamada increment(). Como você vê, increment() é uma função pura.

import React, { useState } from 'react';function increment(n){  return n + 1;}function Counter() {  const [n, setN] = useState(0);    return (    
        {n}            
  );}export default Counter;

Para entender o que setN(increment) faz, vamos ler a documentação.

Passar uma função de atualização permite acessar o valor atual do estado dentro do atualizador.

OK então increment() é chamado com o atual n state e é usado para calcular o novo valor do estado.

Vamos resumir o que descobrimos.

No React, podemos simplesmente definir um componente usando uma função que retorna uma sintaxe semelhante ao HTML.

O React Hooks permite definir o estado em tais componentes funcionais.

E por último mas não menos importante, finalmente nos livramos this pseudo-parâmetro em componentes. Talvez você tenha avisos de que this torna-se irritante mudando o contexto sempre que não é esperado. Não se preocupe com isso. Nós não vamos usar this em componentes funcionais.

Se você chegou até aqui, também pode dar uma olhada nos meus livros.

Descobrir JavaScript funcional foi nomeado um dos melhores livros de programação funcional da BookAuthority!

Para saber mais sobre como aplicar técnicas de programação funcional ao React, dê uma olhada Reação funcional.

Aprender Reagir funcional, de maneira baseada em projeto, com Arquitetura funcional com React e Redux.

Tweet-me o seu feedback.