如何组织一个可维护的前端项目

工程化React

从职责开始划分

目录结构不是目的。划分目录时，需要先回答每段代码负责什么、依赖什么，以及由谁调用。

常见的职责可以分为：

  1. 路由负责页面入口和数据组合。
  2. 组件负责界面与交互。
  3. 数据层负责读取、转换和校验数据。
  4. 内容文件只保存文章本身。

控制组件边界

一个组件需要同时处理读取数据、状态管理和大量布局时，修改成本会增加。可以把稳定的数据接口和可变的界面拆开。

export function PostList({ posts }: PostListProps) {
  return posts.map((post) => <PostCard key={post.slug} post={post} />);
}

清晰的边界让修改的影响范围可以被判断。

检查标准

  • 更换卡片样式时不修改数据读取逻辑。
  • 新增文章时不修改页面组件。
  • 路由参数和文章文件名之间有明确映射。