Component composition is a fundamental concept in [[React]] that allows you to build complex UIs by combining smaller, reusable components. This approach promotes modularity, maintainability, and code reuse. [[React]] offers powerful mechanisms for composing both function and class components.
# 1. Composition with [[Function Component in React]]
Function components are the preferred way to write [[React]] components due to their simplicity and performance benefits. Composition in function components primarily relies on:
* **Props:** Passing data and functions as props to child components.
* **Children Prop:** Rendering content passed between the opening and closing tags of a component.
**Example:**
```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;
```
In this example, the `App` component composes the `Welcome` component by rendering it twice with different `name` props.
**Children Prop Example:**
```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;
```
Here, the `Card` component uses the `children` prop to render any content passed between its opening and closing tags. This allows for flexible composition where the parent component can inject arbitrary content into the child component.
# 2. Composition with [[Class Component in React]]
Class components, while less common in modern [[React]] development, also support composition through props and the `children` prop.
**Example:**
```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;
```
This example demonstrates passing props to a class component. The `Welcome` component accesses the `name` prop via `this.props.name`.
**Children Prop Example:**
```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;
```
Similar to function components, class components can use the `children` prop to render content passed between the component's tags.
# Benefits of Component Composition
* **Reusability:** Components can be reused in different parts of the application with different props and children.
* **Maintainability:** Smaller, focused components are easier to understand, test, and maintain.
* **Flexibility:** Composition allows you to create complex UIs by combining simple components in various ways.
* **Declarative [[Interface de usuário|UI]]:** [[React]]'s component model encourages a declarative approach to building UIs, making it easier to reason about the application's structure and behavior.
# Common Composition Patterns
* **Specialization:** Creating specialized components from more generic ones by passing specific props.
* **Higher-Order Components (HOCs):** Functions that take a component and return a new, enhanced component. (Less common with the rise of hooks)
* **Render Props:** Using a prop whose value is a function that a component uses to render something. (Less common with the rise of hooks)
* **Hooks (for Function Components):** Custom hooks allow you to extract component logic into reusable functions, promoting composition at the logic level.
**:: Reference ::** [Passing Props to a Component – React](https://react.dev/learn/passing-props-to-a-component)