Modern.js 项目实战：容器组件的设计与实现

前言

在现代前端开发中，组件化开发已经成为主流范式。随着应用复杂度增加，如何组织组件结构、分离关注点成为开发者面临的重要课题。Modern.js 提供了一套完整的解决方案，其中容器组件的概念尤为重要。

什么是容器组件

容器组件（Container Component）是连接视图组件和业务逻辑的桥梁。它主要负责：

1. 管理数据状态
2. 处理业务逻辑
3. 将数据和回调函数传递给展示组件

在 Modern.js 中，容器组件通常使用 useModel 钩子来连接业务模型（Model），扮演着类似传统 MVC 架构中控制器的角色。

为什么需要容器组件

在上一章节中，我们已经将业务逻辑抽离到 Model 层，但页面组件仍然直接使用了 Model。这会导致以下问题：

1. 多个页面共享相同逻辑时出现代码重复
2. 业务逻辑与路由组件耦合过紧
3. 难以统一管理数据流

容器组件的引入正是为了解决这些问题，实现更清晰的代码分层。

实现步骤详解

1. 数据加载优化

首先，我们将数据加载逻辑提升到布局组件中：

// src/routes/layout.tsx
export default function Layout() {
  const { data } = useLoaderData() as LoaderData;
  const [{ items }, { setItems }] = useModel(contacts);
  
  // 初始化数据
  if (items.length === 0) {
    setItems(data);
  }
  
  // ...其他布局逻辑
}

这种设计保证了：

• 数据只需加载一次
• 所有子路由共享同一数据源
• 避免重复请求

2. 创建容器组件

我们创建专门的容器组件来封装公共逻辑：

// src/containers/Contacts.tsx
function Contacts({ title, source }: { title: string; source: 'items' | 'archived' }) {
  const [state, { archive }] = useModel(contacts);

  return (
    <div className="container lg mx-auto">
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <List
        dataSource={state[source]}
        renderItem={info => (
          <Item
            key={info.name}
            info={info}
            onArchive={() => archive(info.email)}
          />
        )}
      />
    </div>
  );
}

这个容器组件接收两个props：

• title：页面标题
• source：决定使用Model中的哪个数据源

3. 简化页面组件

页面组件现在变得非常简洁：

// src/routes/page.tsx
function Index() {
  return <Contacts title="All" source="items" />;
}

// src/routes/archives/page.tsx
function Index() {
  return <Contacts title="Archives" source="archived" />;
}

架构优势分析

重构后的项目结构具有以下优势：

1. 清晰的职责划分：

   • 视图组件：纯UI展示
   • 容器组件：连接视图与业务逻辑
   • Model：纯业务逻辑

2. 更好的复用性：

   • 相同的数据和逻辑可以在不同页面共享
   • 新增页面只需简单组合现有组件

3. 更易维护：

   • 修改业务逻辑只需调整Model
   • UI变更只需修改视图组件
   • 路由变化不影响业务逻辑

最佳实践建议

1. 文件组织规范：

   • 视图组件使用目录形式（如 components/Item/index.tsx）
   • 容器组件使用单文件形式（如 containers/Contacts.tsx）

2. 组件设计原则：

   • 容器组件应保持简单，避免复杂逻辑
   • 业务逻辑应放在Model中
   • UI细节应放在视图组件中

3. 性能优化：

   • 数据加载尽量上移到公共父组件
   • 使用React.memo优化视图组件
   • 合理使用Model的selectors避免不必要的渲染

总结

通过引入容器组件，我们实现了Modern.js应用的标准分层架构。这种架构不仅使代码更清晰、更易维护，还能更好地适应业务变化。在后续开发中，可以继续按照这种模式扩展功能，保持代码的可维护性和可扩展性。

记住：好的架构不是一次性设计出来的，而是在不断重构中逐步演进而来的。容器组件正是这种演进过程中的重要里程碑。