Rafael Alves ITM

Composição de componente no React

Leitura de 3 min

🎯 Composição de Componente no React

Em poucas palavras

Definição técnica ou simplificada do conceito.

📝 Notas e Desenvolvimento

🔗 Conexões e Contexto

📚 Referências e Fontes

Citações Diretas

📂 Outros Conteúdos Preservados

1. Composição com Componentes de função no React

Componentes de função são a forma preferida de escrever componentes React devido à sua simplicidade e benefícios de desempenho. A composição em componentes de função depende principalmente de:

  • Props: Passar dados e funções como props para componentes filhos.
  • Prop Children: Renderizar conteúdo passado entre as tags de abertura e fechamento de um componente.

Exemplo:

// Child Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
// Parent Component
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}
 
export default App;

Neste exemplo, o componente App compõe o componente Welcome renderizando-o duas vezes com diferentes props name.

Exemplo de Prop Children:

// Child Component (Layout)
function Card(props) {
  return (
    <div className="card">
      <div className="card-header">{props.header}</div>
      <div className="card-body">{props.children}</div>
    </div>
  );
}
 
// Parent Component
function App() {
  return (
    <Card header="My Card">
      <p>This is the content of the card.</p>
      <button>Click me</button>
    </Card>
  );
}
 
export default App;

Aqui, o componente Card usa a prop children para renderizar qualquer conteúdo passado entre suas tags de abertura e fechamento. Isso permite uma composição flexível onde o componente pai pode injetar conteúdo arbitrário no componente filho.

2. Composição com Componentes de classe no React

Componentes de classe, embora menos comuns no desenvolvimento moderno de React, também suportam composição através de props e da prop children.

Exemplo:

// Child Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
 
// Parent Component
class App extends React.Component {
  render() {
    return (
      <div>
        <Welcome name="Alice" />
        <Welcome name="Bob" />
      </div>
    );
  }
}
 
export default App;

Este exemplo demonstra a passagem de props para um componente de classe. O componente Welcome acessa a prop name via this.props.name.

Exemplo de Prop Children:

// Child Component (Layout)
class Card extends React.Component {
  render() {
    return (
      <div className="card">
        <div className="card-header">{this.props.header}</div>
        <div className="card-body">{this.props.children}</div>
      </div>
    );
  }
}
 
// Parent Component
class App extends React.Component {
  render() {
    return (
      <Card header="My Card">
        <p>This is the content of the card.</p>
        <button>Click me</button>
      </Card>
    );
  }
}
 
export default App;

Semelhante aos componentes de função, os componentes de classe podem usar a prop children para renderizar conteúdo passado entre as tags do componente.

Benefícios da Composição de Componentes

  • Reutilização: Componentes podem ser reutilizados em diferentes partes da aplicação com diferentes props e children.
  • Manutenibilidade: Componentes menores e focados são mais fáceis de entender, testar e manter.
  • Flexibilidade: A composição permite criar UIs complexas combinando componentes simples de várias maneiras.
  • UI Declarativa: O modelo de componentes do React incentiva uma abordagem declarativa para a construção de UIs, tornando mais fácil raciocinar sobre a estrutura e o comportamento da aplicação.

Padrões Comuns de Composição

  • Especialização: Criar componentes especializados a partir de outros mais genéricos, passando props específicas.
  • Higher-Order Components (HOCs): Funções que recebem um componente e retornam um novo componente aprimorado. (Menos comum com o surgimento dos hooks)
  • Render Props: Usar uma prop cujo valor é uma função que um componente usa para renderizar algo. (Menos comum com o surgimento dos hooks)
  • Hooks (para Componentes de Função): Hooks personalizados permitem extrair a lógica do componente em funções reutilizáveis, promovendo a composição no nível da lógica.

:: Referência :: Passando Props para um Componente – React

Visão de gráfico

Backlinks