Componentes

Os componentes React são pedaços de código reutilizáveis ​​que definem a estrutura e o comportamento de partes de uma interface de utilizador. São os blocos de construção das aplicações React, permitindo aos programadores criar código modular e de fácil manutenção.

Existem dois tipos de componentes React:

Componentes funcionais

São componentes mais simples e mais utilizados. São funções JavaScript que devolvem elementos React:

function Carro(props) {
  return <h1>Marca: {props.marca}</h1>;
}

Componentes de classe

São classes ES6 que estendem React.Component. Embora ainda sejam suportados, são menos comummente utilizados no desenvolvimento moderno do React:

class Carro extends React.Component {
  render() {
    return <h1>Marca: {this.props.matricula}</h1>;
  }
}

Principais características dos componentes

  • Reutilização: Os componentes podem ser reutilizados numa aplicação, promovendo a eficiência do código.
  • Props: Os componentes aceitam entradas denominadas props, permitindo que sejam personalizadas.
  • Gestão de estado: Com a introdução de hooks, os componentes funcionais podem gerir o seu próprio estado.
  • Composição: os componentes podem ser aninhados noutros componentes, criando UIs complexas a partir de blocos de construção simples.

Estado de um componente

O estado de um componente React é um objeto integrado que armazena dados específicos de um componente e determina como este se comporta e é renderizado. Representa a “memória” do componente e permite a criação de interfaces de utilizador dinâmicas e interativas.

Principais características do estado de um componente

  • Mutável: Ao contrário dos props, o estado pode ser alterado utilizando o método setState().
  • Específico do componente: O Estado é privado e totalmente controlado pelo componente.
  • Aciona novas renderizações: quando o estado muda, o componente é renderizado novamente para refletir os dados atualizados.

Criação e inicialização do estado

Nos componentes de classe o estado é tipicamente inicializado no construtor:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      marca: "Ford",
      modelo: "Mustang",
      ano: 1964
    };
  }
}

Nos componentes funcionais usamos o hook useState:

import React, { useState } from 'react';

function Turma() {
  const [count, setCount] = useState(0);
  // ...
}

Atualização do estado

O estado nunca deve ser modificado diretamente. Em vez disso, devemos utilizar o método setState() para os componentes da classe ou a função setter devolvida pelo useState para os componentes funcionais

// Class component
this.setState({modelo: "Escort"});

// Functional component
setCount(count + 1);

Conclusão

Ao utilizar o estado de forma eficaz, os componentes React podem manter os seus próprios dados e responder às interações do utilizador, criando interfaces de utilizador dinâmicas e responsivas.