Componentes de classe
Os componentes de classe no React são classes ES6 que estendem React.Component e fornecem uma forma de criar elementos de UI reutilizáveis com características mais avançadas. Eram a principal forma de criar componentes antes da introdução de hooks.
Principais características
- Sintaxe: os componentes da classe são definidos utilizando a sintaxe da classe ES6.
- Gestão de estado: os componentes da classe podem gerir o seu próprio estado utilizando this.state e this.setState().
- Métodos do ciclo de vida: têm acesso a métodos de ciclo de vida como componentDidMount, componentDidUpdate e componentWillUnmount.
Exemplo de um componente de classe
class Carro extends React.Component {
render() {
return <h1>Marca, {this.props.marca}</h1>;
}
}Prós e contras
Prós
- Mais recursos como métodos de ciclo de vida e gestão de estado.
- Familiar para programadores com experiência em POO.
Contras
- Sintaxe mais complexa em comparação com os componentes funcionais.
- Requer a compreensão da palavra-chave ‘this’.
- Menos desempenho do que os componentes de função em alguns casos.
Ciclo de vida
Os componentes da classe passam por três fases principais do ciclo de vida:
- Montagem: Quando o componente está a ser adicionado ao DOM.
- Atualização: quando o estado ou as propriedades do componente são alterados.
- Desmontar: Quando o componente está a ser removido do DOM
Métodos do ciclo de vida
Os componentes de React passam por diversas fases durante o seu ciclo de vida.
NOTA: o ciclo de vida de um componente começa quando ele é criado e termina quando é colocado no DOM ou é apagado.
As fases no ciclo de vida de um componente são: Mounting, Updating e Unmounting.
Cada uma destas fases possui vários métodos de callback especiais que são chamados pelo React:
construtor(): inicializa o estado e liga os métodos.
render(): O único método necessário, retorna JSX para ser renderizado.
componentDidMount(): É executado após a montagem do componente, ideal para a pesquisa de dados.
componentDidUpdate(): é executado após a ocorrência de atualizações, útil para efeitos colaterais.
componentWillUnmount(): É executado antes do componente ser desmontado, utilizado para limpeza.
Mounting phase
Esta é a fase em que uma instância de um componente é criada é inserida no DOM.
Nesta fase existem 3 métodos de callback que são os seguintes: constructor(), render() e componentDidMount().
Estes 3 métodos são chamados pelo React por esta ordem e podemos usá-los para executar determinadas tarefas no respetivo timing.
Se o método constructor() estiver declarado este será o primeiro a ser chamado pelo React.
Este método é chamado aquando da inicialização do componente e é o sitio ideal para definir o estado inicial do componente assim como inicializar outros dados.
O método constructor() é chamado com os props, como argumentos, e deve sempre começar por chamar super (props) antes de qualquer outra coisa; isso iniciará o método construtor do componente pai e permitirá que o componente herde métodos docomponente pai (React.Component).
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
} O método render() é obrigatório e é o método, a partir do qual, o HTML do componente é gerado.
class Header extends React.Component {
render() {
return (
<h1>This is the content of the Header component</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root')); O método componentDidMount() é chamado após o componente ter sido colocado no DOM. É o sitio ideal para actualizar ao dados do componente através de pedidos de AJAX a uma base de dados no servidor.
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
//Faz pedido de AJAX aqui para obter dados do servidor
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root')); Updating phase
A próxima fase do ciclo de vida de um componente é actualizado. É a Updating fase.
Um componente é actualizado sempre que o state ou props mudam.
Esta fase possui vários métodos de callback mas vamos só considerar os dois seguintes, por serem os mais frequentemente usados: render() e componentDidUpdate(). Estes dois métodos são chamados por esta ordem.
O método render() é chamado quando um componente é atualizado; ele deve renderizar novamente o HTML no DOM, com as novas alterações.
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root')); Unmounting phase
A ultima fase, Unmounting fase, ocorre quando um componente é removido do DOM.
Esta fase só possui um método de callback: componentWillUnmount().
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</butto
n>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root')); Props
Props nos componentes da classe React são uma forma de passar dados de componentes pais para componentes filhos. São acedidos usando o objeto this.props dentro da classe.
Aceder aos props
Num componente de classe, os props estão disponíveis através de this.props:
class Pessoa extends React.Component {
render() {
return <h1>Olá, {this.props.nome}</h1>;
}
}