# 组件嵌套与组合

URL: https://caijiao.org/react/chapter4/component-composition
Source: docs/react/chapter4/component-composition.md
Description: 在 React 中，组件可以相互嵌套与组合，从而构建复杂的用户界面。通过合理的嵌套和组合，可以使得代码更加模块化、可重用，并且易于维护。

在 React 中，组件的嵌套与组合是构建应用的核心方式之一。通过嵌套组件，父组件能够将不同的功能模块组合在一起，从而实现复杂的界面和交互。React 强调组件的复用性和可组合性，允许将不同功能的组件组合成一个更大的组件。

## 1. 组件嵌套

组件嵌套指的是在一个组件中使用其他组件作为子组件，这种方式可以帮助我们将复杂的 UI 分解成更小、更易于管理的部分。

### 1.1 基本嵌套示例

```jsx
import React from 'react';

function Header() {
  return <h1>Welcome to My App</h1>;
}

function Footer() {
  return <footer>© 2025 My Company</footer>;
}

function App() {
  return (
    <div>
      
      <p>This is the main content of the app.</p>
      
    </div>
  );
}

export default App;
````

在这个例子中，`App` 组件嵌套了 `Header` 和 `Footer` 组件。这样做将页面的结构分解成了多个小组件，每个组件负责不同的部分。

## 2. 组件组合

组件组合指的是通过传递不同的数据和行为，将多个组件组合成一个功能更强大的组件。React 允许我们通过 `props` 将数据从父组件传递给子组件，从而实现组件之间的交互。

### 2.1 父子组件组合示例

```jsx
import React from 'react';

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

function App() {
  return (
    <div>
      
      
    </div>
  );
}

export default App;
```

在这个例子中，`App` 组件通过 `props` 向 `Greeting` 组件传递不同的名字，从而展示个性化的问候语。

### 2.2 子组件返回内容给父组件

有时，我们需要让子组件将事件或数据传递回父组件，这可以通过将父组件的函数作为 `props` 传递给子组件来实现。

```jsx
import React, { useState } from 'react';

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You've clicked {count} times</p>
      
    </div>
  );
}

export default App;
```

在这个例子中，`Button` 组件通过 `props.onClick` 将点击事件处理器传递给父组件 `App`。当按钮被点击时，`App` 组件的 `handleClick` 方法会被调用，更新计数。

## 3. 组件组合模式

React 提供了几种常见的组件组合模式，帮助我们在不同的场景下设计更加灵活和可扩展的组件结构。

### 3.1 包裹组件（Wrapper Components）

包裹组件是指将一些公共逻辑或样式封装在一个组件中，然后将其他组件作为子组件传递给它。常见的例子有布局组件。

```jsx
import React from 'react';

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    
  );
}

export default App;
```

在这个例子中，`Card` 组件作为一个包裹组件，接收 `children` 并渲染它，从而允许我们在不同的地方复用相同的布局。

### 3.2 高阶组件（HOC）

高阶组件（Higher-Order Components，HOC）是 React 中的一种设计模式，允许我们通过传递一个组件并返回另一个组件来增强组件的功能。HOC 不会修改原组件，而是返回一个新的组件，通常用于逻辑重用。

```jsx
import React from 'react';

function withLoading(Component) {
  return function WithLoading(props) {
    if (props.isLoading) {
      return <p>Loading...</p>;
    }
    return ;
  };
}

function Data(props) {
  return <div>{props.data}</div>;
}

const DataWithLoading = withLoading(Data);

function App() {
  return (
    <div>
      
      
    </div>
  );
}

export default App;
```

在这个例子中，`withLoading` 是一个高阶组件，它为 `Data` 组件添加了加载状态的功能。

## 4. 组件组合的优点

* **提高代码复用性**：通过组合多个小组件，我们可以避免重复代码，提高代码的复用性。
* **增强可维护性**：将不同功能模块化后，组件更容易管理和调试。
* **易于扩展**：组件化的设计使得我们能够根据需求动态组合不同的组件，增加新功能时只需组合现有组件即可。

## 5. 总结

React 的组件嵌套与组合使得开发者能够创建复杂的 UI，同时保持代码的简洁和可维护性。通过嵌套组件和传递 `props`，父子组件能够互相协作，提供丰富的用户体验。组件组合模式（如包裹组件和高阶组件）使得 React 具有很高的灵活性，能够应对不同的开发需求。