Composição de componentes é um conceito fundamental em [[React]] que permite construir UIs complexas combinando componentes menores e reutilizáveis. Essa abordagem promove modularidade, manutenibilidade e reutilização de código. [[React]] oferece mecanismos poderosos para compor tanto componentes de função quanto de classe.
# 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:**
```jsx
// 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:**
```jsx
// 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:**
```jsx
// 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:**
```jsx
// 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.
* **[[Interface de usuário|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](https://react.dev/learn/passing-props-to-a-component)