Tipos de componentes: Funcionais e de Classe
Componentes funcionais são funções JavaScript simples. Eles aceitam props como argumento e retornam elementos React. Esses componentes são mais fáceis de escrever e entender.
Exemplo:
function Saudacao(props) {
return <h1>Olá, {props.nome}!</h1>;
}Neste exemplo, Saudacao é um componente funcional. Ele recebe props e retorna um elemento h1.
Componentes de Classe
Componentes de classe são mais poderosos. Eles permitem o uso de estado e métodos de ciclo de vida. Esses componentes são escritos usando classes ES6.
Exemplo:
import React, { Component } from 'react';
class Saudacao extends Component {
render() {
return <h1>Olá, {this.props.nome}!</h1>;
}
}
export default Saudacao;Aqui, Saudacao é um componente de classe. Ele estende React.Component e usa this.props para acessar as props.
Diferenças e Escolhas
Simplicidade: Componentes funcionais são mais simples. Eles são preferidos quando não é necessário o estado ou métodos de ciclo de vida.
Estado e Ciclo de Vida: Componentes de classe são necessários para estados complexos e ciclo de vida. Com a introdução dos Hooks, é possível usar estado e efeitos em componentes funcionais.
Performance: Componentes funcionais geralmente têm melhor performance. Eles são otimizados pelo React internamente.
Conclusão
Componentes funcionais são ótimos para lógica simples e sem estado. Componentes de classe são úteis para lógica complexa com estado e ciclo de vida.
No entanto, com os Hooks, muitos desenvolvedores preferem componentes funcionais pela simplicidade e flexibilidade.
