组件化复用：高内聚低耦合的代码组织方式

什么是高内聚低耦合

在软件工程中，高内聚指的是一个模块内部的功能紧密相关，专注于做好一件事；低耦合指的是模块之间的依赖关系要尽量简单、最少。React 的组件化设计天然支持这种组织方式：

高内聚：每个组件把结构（JSX）、样式和交互逻辑封装在一起，形成一个自包含的单元。
低耦合：组件之间通过明确的接口（Props）通信，内部实现对外部完全隐藏。一个组件的修改不应该影响其他不相关的组件。

这种组织方式让代码更容易理解、测试和维护——就像乐高积木，每块积木内部结构成型，积木之间通过统一的凸起和凹槽连接，可以任意拆装组合。

实际价值的三个维度

1. 独立开发与测试

高内聚的组件只依赖自己的 Props 和内部状态，不依赖全局变量或其他组件的内部实现。这让你可以单独编写单元测试，验证给定输入是否输出预期的 UI。

// 只需要关心输入和输出，无需模拟外部环境
test('Button 渲染正确文本', () => {
  render(<Button>提交</Button>);
  expect(screen.getByRole('button')).toHaveTextContent('提交');
});

2. 灵活组合与替换

低耦合让组件替换变得极其容易。比如你的应用里有一个 Avatar 组件，从圆形头像变成方形头像，只需要修改 Avatar 内部实现，所有引用的地方自动生效。甚至可以运行时根据条件切换不同的组件实现，而不改动使用方代码。

function Dashboard({ user }) {
  return (
    <Card>
      <ProfileBadge user={user} />  {/* 内部实现可以是头像、昵称、等级徽章 */}
      <RecentActivities userId={user.id} />
    </Card>
  );
}

Dashboard 不关心 ProfileBadge 怎么渲染，只要它遵守 Props 约定即可。

3. 复用成本极低

一个组件写好之后，可以在项目任何地方复用，甚至发布到 npm 供其他项目安装。例如，一个通用的 Pagination 组件：

function Pagination({ current, total, onChange }) {
  // 内部封装分页逻辑
  return (
    <div className="pagination">
      {Array.from({ length: total }, (_, i) => (
        <button
          key={i}
          onClick={() => onChange(i + 1)}
          disabled={i + 1 === current}
        >
          {i + 1}
        </button>
      ))}
    </div>
  );
}

无论是商品列表、用户管理、还是日志页面，只要需要分页，直接 <Pagination /> 即可，零重复代码。

实现高内聚低耦合的具体做法

1. 单一职责原则

一个组件只做一件事。当你发现某个组件同时负责渲染列表、过滤数据、请求接口时，果断拆分。

❌ 不好的例子：

function ProductPage() {
  const [products, setProducts] = useState([]);
  const [keyword, setKeyword] = useState('');
  
  // 请求、过滤、渲染全部耦合在一个组件
  useEffect(() => { fetch('/products').then(setProducts); }, []);
  
  const filtered = products.filter(p => p.name.includes(keyword));
  
  return (
    <div>
      <input onChange={e => setKeyword(e.target.value)} />
      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

✅ 改进后：

// 数据请求钩子
function useProducts() { ... }

// 过滤输入组件
function SearchBar({ onSearch }) { ... }

// 产品列表组件
function ProductList({ products }) { ... }

function ProductPage() {
  const { products } = useProducts();
  const [keyword, setKeyword] = useState('');
  const filtered = products.filter(p => p.name.includes(keyword));
  
  return (
    <div>
      <SearchBar onSearch={setKeyword} />
      <ProductList products={filtered} />
    </div>
  );
}

每个部分职责清晰，SearchBar 可以复用到任何需要搜索的地方。

2. Props 设计作为稳定契约

Props 是组件对外的公开接口，设计时要遵循“最小信息原则”——只暴露对方真正需要的属性，不传递无关数据或整个对象。

// ❌ 传递整个 user 对象，TodoItem 必须知道 user 的结构
<TodoItem user={currentUser} task={task} />

// ✅ 只传递必要信息
<TodoItem avatar={currentUser.avatar} assigneeName={currentUser.name} task={task} />

更好的做法是，Props 设计成“只要给这些属性，组件就能正常工作”，不依赖特定数据来源。

3. 通过 children 实现插槽式组合

React 的 children 属性是降低耦合的利器。一个容器组件可以只负责布局或逻辑，具体内容由调用方通过 children 注入，容器完全不知道内容是什么。

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

// 使用
<Card title="用户信息">
  <UserAvatar user={user} />
  <UserDetails user={user} />
</Card>

Card 不依赖 UserAvatar 或 UserDetails，任何内容都能嵌入。

常见的反模式与避坑

1. 过深的组件嵌套传递 Props（Props Drilling）

如果中间组件只是传递 Props 而不使用，就会造成耦合链条过长。解决方案是使用 Context 或状态管理库，避免让中间层组件知道不该知道的信息。

2. 组件内部直接访问全局状态

// ❌ 组件直接读取全局 store，与特定状态库强耦合
function Button() {
  const theme = useStore(state => state.theme);
}

更好的方式是通过 Props 或 Context 注入，这样组件可以脱离特定状态库独立工作。

3. 巨大组件一把梭

如果一个组件拥有几十个状态和几十个副作用，它一定是高耦合的产物。应持续拆分成更小的内聚单元。

总结

高内聚低耦合不是空洞的口号，而是通过组件拆分、Props 设计、合理使用组合模式等具体实践达成的结果。在 React 中，这直接带来：

开发速度快：复用已有组件，不必从零造轮子。
维护成本低：改一处不影响全局。
测试友好：独立组件可单独验证。
团队协作顺滑：组件接口是天然的分工边界。

组件化复用是 React 工程化的基石，掌握了这一思想，你写出的代码将经得起时间和业务变化的考验。