[React]Class Component vs Functional Component:

Primeiramente, usando componentes de classe estes são os principais métodos de ciclos de vida (No geral, são divididos em 3 partes):

1.  Montagem:

• constructor(): está diretamente atrelado ao ciclo de vida do componente e é a primeira função executada pelo mesmo.
• render(): é chamado quando o componente é renderizado em tela.
• componentDidMount(): chamado logo após o render ser finalizado.

2.  Atualização:

• render(): sua posição aqui em atualização, se deve a toda vez que uma alteração nas propriedades ou estado do componente render é novamente executado.
• componentDidUpdate(): Executado após o novo render.

3.  Desmontagem:

• componentWillUnmount(): Chamado antes de um componente ser desmontado.

 Sobre o Estado:

Para a declaração de uma variável de estado trarei o exemplo de um contador: inicializamos o estado contador = 0 definindo this.state como { contador: 0 } no constructor (Precisamos usar o constructor para trabalhar com estado). Ademais, não se deve modificar estados diretamente:

this.state.contador = 1; // Errado

this.setState({contador: 1}); // Correto 

Exemplo de código com componente de classe (clique aqui):

Trabalhando com Componentes Funcionais:

Após a React Conf 2018 (com o React v16.7.0), tornou-se capaz de gerenciar o estado (hook useState) e o ciclo de vida (hook useEffect) em Componentes Funcionais (através dos hooks), no qual anteriormente tínhamos somente a possibilidade de renderizar Stateless Components (componentes que não possuem nenhum ciclo de vida ou estado e retornam apenas JSX).

As motivações por trás desta feature de funções especiais (hooks), gira na complexidade e verbosidade ao trabalhar com componentes de classe.

Deste modo, destaco aqui dois principais hooks:

1.  useState (muito utilizado para controlar alguma variável de estado);

2.  useEffect (utilizável após inicialização e atualização de um componente - suprindo o que componentDidMount e componentDidUpdate podem fazer).

Assim como nos componentes de classe não se deve modificar os estados diretamente:

contador = 1; // Errado

setContador({contador: 1}); // Correto

 Exemplo de código com Componente Funcional (clique aqui):

Referências Bibliográficas:

https://blog.rocketseat.com.br/react-hooks/

https://medium.com/@henrique.weiand/react-component-stateful-stateless-plano-de-aula-vii-8a928cdf3eb1

https://reactjs.org/docs/hooks-state.html

https://reactjs.org/docs/state-and-lifecycle.html