Componentes de classe tendem a ser mais complicados por conta dos construtores e controle de ciclo de vida. Isso torna o ambiente de desenvolvimento menos produtivo.
Exemplo de componente de classe:
import React, { Component } from 'react';
export default class MeuComponente extends Component {
constructor(props) {
super(props);
this.state = {
nome: 'Larissa',
};
}
mudarNome = (e) => {
this.setState({
nome: e.target.value,
});
}
render() {
const { nome } = this.state;
return (
<div>
<h1>{ nome }</h1>
<input type="text" name="teste" onChange={this.mudarNome} />
</div>
);
}
}
Exemplo de componente de função:
import React, { useState, useEffect } from 'react';
export default function MeuComponente(props){
var
}