Diferença Entre Class Component E Functional Component - React

Desde a implementação dos Hooks no React, usamos com mais frequência componentes funcionais em nossos projetos do que componentes de classes

Mas afinal, qual é a diferença entre Functional Components e Class Components?

Functional Components

São os componentes que encontraremos com maior frequência enquanto estivermos trabalhando com React. Basicamente são funções Javascript. Apenas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { useState } from "react";

export function CounterFunction {
const[count , setCount] = useState(0);

const increase = () => {
setCount(count+1);
}

return (
<div>
<h1>Bem-vindo ao contador Back&Front!</h1>
<h2>{count}</h2>
<button onClick={increase}>Adidcionar</button>
</div>
)

}

Class Components

Os componentes são escritos usando classes, sendo necessário estender React.Component e é necessário ter um método render() para retornar as informações em tela

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from "react";

class ClassComponent extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};

this.increase = this.increase.bind(this);
}

increase() {
this.setState({ count: this.state.count + 1 });
}

render() {
return (
<div>
<h1>Bem-vindo ao contador Back&Front!</h1>
<h2> {this.state.count}</h2>
<button onClick={this.increase}>Adidcionar</button>
</div>
);
}
}

export default ClassComponent;

Agora, resumidamente, as principais diferenças:

Functional Components Class Components
Uma simples função que aceita props como argumento e retorna um elemento React; Componente por classe exige que você estenda de React.Component
Não existe método render() para exibir os elementos É obrigatório que tenha o método render retornando HTML
Também conhecido como Componentes Stateless, por simplesmente aceitar um dado, sem necessidade de ter lógica nele Conhecido também como Stateful Components, visto que é implementado lógica e estados
São usados os Hooks para seu ciclo de vida (useEffect) e useState para estados São usados seus métodos para manipular o ciclo de vida, como por exemplo componentDidMount