分享一位读者读完上一章之后的评论，我觉得很有道理。

“经历过前端开发刀耕火种的年代，自然就明白模块化组件化虚拟 DOM 等概念的重要意义，也就更容易把这些知识看得更加重要，视若珍宝。”这一点很到位。普通人只能看到知识本身，而高手能掌握知识的推演和演进，进而习得这个学科的核心思维。

这一章非常关键。

特别是对有一定开发经验的朋友来说，它可能会颠覆你的认知。并大幅度提高你的开发效率。

组件化的开发思维是前端独有，在其指导下，代码组织结构，也必然会跟传统的模块化思维不一样。

在 MVC 分层思维的影响下，大多数团队在前端项目中，组织代码结构的方式沿用了分层思维。

例如，我们的项目有 100 个页面，我们先不细分到组件，那么每个页面基本上都具备以下内容

• View，用于 UI 的展示
• 数据访问，各种接口请求
• 状态管理、逻辑处理，model 或者别的名称，用于处理当前页面的状态与数据
• css，该页面自己的样式

于是，我们在做项目组织的时候，一般都会如下这样处理，

1、创建一个 pages 目录，将所有的页面 UI 或者组件放到该文件夹中

1
+ pages
2
  - Home
3
  - Profile
4
  - Detail
5
  - Show
6
  ...

2、创建一个 apis 目录，将所有的接口请求代码放在该目录中

1
+ apis
2
  - common.ts
3
  - home.ts
4
  - profile.ts
5
  - detail.ts
6
  - show.ts
7
  ...

3、创建一个 models 目录，将所有的状态管理逻辑处理等模块放在该目录中

1
+ models
2
  - home.ts
3
  - profile.ts
4
  - detail.ts
5
  - show.ts

4、创建一个 styles 目录，将所有的 css 文件放在该目录

1
+ styles
2
  - common.css
3
  - home.css
4
  - profile.css
5
  - detail.css
6
  - show.css
7
  ...

于是，我们整个项目的代码层面，可能就会长这样

1
// 其他文件结构与脚手架有关，这里不做扩展
2
+ src
3
  + assets
4
  + commonets
5
  + pages
6
  + models
7
  + apis
8
  + styles

这是传统的分层代码结构组织形式。那么它运用到前端，有什么问题呢？

在开发时，其实有一个痛点很多人都有，只是没有明确提出来。那就是当我们仅仅只是实现一个页面功能时，我们需要使用编辑器打开大量的代码文件，可能是 4、5 个，多一点的 10 多个都有。

因此前端的编辑器大多数都支持分屏功能，但是后端的编辑器基本不需要。

那么在这种情况之下，当项目变得很大之后，文件与文件之间的位置就隔得很远。例如 pages/Home 与 apis/home.ts 他们虽然属于同一页面，但是在代码结构上却相隔得非常远。

当项目页面越多，我们要找到对应页面的组成部分，就越困难。在我们不够专注「摸鱼」的情况下，甚至会找不到。

因此对于前端开发来说，这种分层的代码组织效率非常低下。

在组件化思维的指导下，我们应该采用新的组织方式。组件化的思维强调整体，强调聚合，也就是说，只要是一个组件的组件部分，我们应该尽量把他们放在一起。

例如，我们有一个 Home 页面，那么就应该这样去组织代码

1
+ Home
2
  - index.tsx
3
  - index.css
4
  - api.ts
5
  - model.ts

当然，如果页面比较复杂，可能还有更多的组成部分

10
+ Home
20
  + components  // 子组件
30
  + images      // 图片资源
40
  - index.tsx
50
  - api.ts
60
  - model.ts
70
  - interface.d.ts
80
  - config.ts
90
  - entry.ts  // 存放一些默认值、常量、隐射关系等
10
  - data.cvs  // 某种别的数据格式
11
  ...

在代码结构组织上，我们也把一个组件当成一个整体，只要是属于该组件的，基本上都放在一个文件夹里，对外来说，Home 文件夹，就代表了 Home 组件的全部。

这就是组件化思维指导下的代码组织方式。无论是做项目迁移，还是类似的页面复制功能，这都是最简单最高效的方式。

因此代码文件结构最终可能如下

1
+ src
2
  + components // 项目公共组件
3
  + pages // 所有的页面，将页面当成整体来看待
4
  + hooks // hooks 类工具方法
5
  + utils // 普通工具方法
6
  + api.ts // 少量的共有请求
7
  + router.ts // 处理路由配置