10.为什么在React中“组合优于继承”
来源：https://w0hog67yl81.feishu.cn/wiki/Gd1Zw8kZGiLguXkE57yctfpJnKd
采集状态：已完成正文采集；正文滚动至底部，按块及代码行号采集

组合优于继承：React 开发中的设计哲学​

​

在软件开发中，我们常常听到一个经典的设计原则：“组合优于继承”（Composition over Inheritance）。这不仅是面向对象编程（OOP）中的一句箴言，更是在现代前端框架（如 React）中被广泛实践的核心思想。​

​

这篇文章将深入探讨这一原则，解释为什么组合通常是比继承更灵活、更强大的选择，并结合实例，展示它在 React 开发中的具体应用。​

​

一、两种代码复用思路：继承与组合​

​

要理解“组合优于继承”，我们首先需要明确这两种模式的本质区别。它们都旨在解决代码复用问题，但实现路径截然不同。​

​

1. 继承（Inheritance）​

​

继承描述了一种 “是一个”（is-a） 的关系。一个子类继承自父类，从而自动获得父类的属性和方法。​

​

例如，我们可以定义一个 Animal 类，然后让 Dog 和 Cat 类继承它。Dog “是一个” Animal，Cat 也“是一个” Animal。它们天生就具备了 Animal 的基本特征（如 eat() 方法），同时也可以有自己的独特行为（如 bark() 或 meow()）。​

​

这种模式的优点是直观，易于理解。但在复杂的系统中，它会带来一些难以回避的问题：​

​

•
紧密耦合：子类与父类的实现细节紧密绑定。一旦父类的实现发生变化，所有子类都可能受到影响，甚至出现问题。这就是所谓的“脆弱的基类问题”（Fragile Base Class Problem）。​

•
僵化的层级：继承关系在编译时就已确定，非常僵硬。如果你想让一个类同时具备多个不相关父类的能力（例如，一个 Bird 既想继承 Animal 的能力，又想继承 Flyable 的能力），就会陷入“多重继承”的困境，这在很多语言中是不被支持或不被推荐的。​

•

不必要的暴露：子类会继承父类所有的属性和方法，即使它只需要其中一小部分。这可能导致接口臃肿，或者意外地暴露了不应该被外部访问的内部实现。

2. 组合（Composition）​

​

组合则描述了一种 “有一个”（has-a） 或 “使用一个”（uses-a） 的关系。一个类通过包含其他类的实例来构建自身的功能，而不是通过继承。​

​

想象一下组装一台电脑。我们不会去“继承”一块主板，而是将 CPU、内存条、硬盘等独立的部件“组合”在一起。电脑“有一个”CPU，“有一个”内存条。每个部件都可以独立替换和升级，而不会影响其他部件。​

​

这就是组合的精髓：将复杂系统拆解为一系列更小、更专注、可独立变化的“零件”，然后将它们拼装起来。它的优势恰好弥补了继承的不足：​

​

•
松散耦合：各个部分专注于自己的职责，通过清晰的接口进行通信。只要接口不变，内部实现可以随意修改，而不会影响到其他部分。​

•
高度灵活：我们可以在运行时动态地组合或替换部件，从而实现更灵活的功能组合。​

•

职责单一：每个部分都遵循单一职责原则，易于理解、测试和维护。

二、React 如何体现“组合优于继承”？​

​

React 的核心就是组件。一个 React 应用本质上是由无数个小组件组合而成的一个大组件。这种架构天然地倾向于组合模式，而非继承。​

​

在 React 的世界里，**我们几乎从不通过继承 React.Component 来创建组件基类以复用代码**。相反，我们通过各种组合技巧来实现功能的复用和扩展。​

​

下面是几种在 React 中常见的组合模式。​

​

1. 包含（Containment）：通过 props.children​

​

这是最基本、最常见的组合方式。组件可以接收任意内容作为它的 children，从而扮演一个“容器”的角色。​

​

例如，我们可以创建一个通用的 Card 组件，它负责提供一个带边框和阴影的视觉外壳，但对其内部内容一无所知。​

​

// Card.js
function Card(props) {
  // props.children 会接收组件标签之间的所有内容
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

// App.js
function App() {
  return (
    <Card>
      <h2>欢迎来到我的博客</h2>
      <p>这是一篇关于“组合优于继承”的文章。</p>
    </Card>
  );
}

​

在这里，Card 组件并没有通过继承来获得显示标题和段落的能力。它只是为其他元素提供了一个“盒子”，它与内部的内容是完全解耦的。我们可以把任何东西放进这个 Card，从简单的文本到复杂的表单，甚至是另一个 Card。​

​

2. 特化（Specialization）：通过传入组件作为 Prop​

​

当一个“容器”组件有多个需要填充的“插槽”时，我们可以通过 props 传入特定的 React 组件来实现特化。​

​

想象一个通用的 Dialog 对话框组件。它可能由标题、内容和操作按钮组成。我们可以将这些部分定义为 props，从而让使用者自由定义对话框的每个部分。​

​

// Dialog.js
function Dialog(props) {
  return (
    <div className="dialog">
      <header className="dialog-header">
        {props.title}
      </header>
      <main className="dialog-content">
        {props.content}
      </main>
      <footer className="dialog-footer">
        {props.actions}
      </footer>
    </div>
  );
}

// WelcomeDialog.js
function WelcomeDialog() {
  return (
    <Dialog
      title={<h1>欢迎！</h1>}
      content={<p>感谢你访问我们的网站。</p>}
      actions={<button>关闭</button>}
    />
  );
}

​

WelcomeDialog 是 Dialog 的一个“特化”版本。我们没有创建一个 class WelcomeDialog extends Dialog，而是通过为 Dialog 组件的“插槽”提供具体内容（JSX 元素）来创建了一个更具体的实例。这种方式显然更加灵活。​

​

3. 逻辑复用：通过自定义 Hooks​

​

在过去，React 使用高阶组件（HOCs）和渲染属性（Render Props）等模式来复用组件之间有状态的逻辑。虽然它们也是组合模式的体现，但自定义 Hooks（Custom Hooks）在 React 16.8 之后成为了更简洁、更直观的选择。​

​

自定义 Hook 是一个函数，其名称以 use 开头，内部可以调用其他 Hooks（如 useState, useEffect）。它允许我们将组件逻辑提取到可重用的函数中。​

​

假设我们需要在多个组件中获取并展示用户的在线状态。我们可以创建一个 useUserStatus 的自定义 Hook。​

​

import { useState, useEffect } from 'react';

// 自定义 Hook
function useUserStatus(userId) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToUserStatus(userId, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromUserStatus(userId, handleStatusChange);
    };
  }, [userId]);

  return isOnline;
}

// 组件 1：在好友列表中显示状态
function UserListItem({ user }) {
  const isOnline = useUserStatus(user.id);
  
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {user.name}
    </li>
  );
}

// 组件 2：在聊天窗口标题中显示状态
function ChatHeader({ user }) {
  const isOnline = useUserStatus(user.id);

  return (
    <h1>
      {user.name} {isOnline ? ' (在线)' : ' (离线)'}
    </h1>
  );
}

​

在这个例子中，UserListItem 和 ChatHeader 都“使用”了 useUserStatus 这个 Hook 提供的逻辑，但它们之间没有任何继承关系。它们只是消费了 Hook 返回的状态。这是一种完美的逻辑组合：状态逻辑被封装在 Hook 中，而 UI 组件则专注于如何展示这些状态。我们可以在任何组件中复用这段逻辑，而无需关心其内部实现。​

​

结论​

​

综上所述，“组合优于继承”这一原则在 React 的生态中得到了淋漓尽致的体现。React 的组件模型鼓励我们将 UI 和逻辑拆分为更小、独立、可复用的单元，然后像拼搭乐高积木一样将它们组合起来，构建出复杂而灵活的应用程序。​

​

•
通过 props.children 实现内容组合。​

•
通过传入组件作为 props 实现组件特化。​

•

通过自定义 Hooks 实现状态逻辑的复用和组合。

在日常开发中，当我们思考如何复用代码或构建组件时，不妨多问一句：“我应该继承它，还是组合它？” 在 React 的世界里，答案通常都是后者。拥抱组合，将帮助我们写出更具可维护性、可扩展性和可测试性的代码。​

​