1.1 前端开发的演进与组件化需求

1.1 前端开发的演进与组件化需求

本节摘要：前端从"手搓 DOM"的命令式时代，一步步演进到"声明式 + 组件化"的现代范式。组件化不是某个天才拍脑袋的发明，而是应用变复杂之后被逼出来的必然。读懂这条演进线，你才明白 React、Vue 现在替你扛住的是什么。

本节阅读目标
阅读完本节，你应当能够：

1. 复述前端四条演进阶段各自的痛点与产物。
2. 说清"命令式"和"声明式"在开发体验上的差别。
3. 解释组件化解决的是复用、维护、协作中的哪几类问题。

一、为什么先谈演进

装好 Vue 或 React，敲几行代码页面就出来了，几乎没有"手搓"的体感——这恰恰是问题。框架把大量脏活替你藏了起来，你会误以为那些机制是理所当然的。真到要排查"为什么数据变了页面不动"时，你才后悔没搞清原理。本节用最短的篇幅把演进主线串一遍，作用等同于看地图前先知道"我们是从哪走到这的"。

二、命令式时代：数据与界面靠人肉同步

最早做交互页面，是找元素、改属性、绑事件、再手动刷新。一段典型的旧式代码是这样的：

// 命令式：每一步都要你亲自告诉浏览器怎么改
var count = 0;
var btn = document.getElementById('plus');
var label = document.getElementById('count-label');
btn.addEventListener('click', function () {
  count = count + 1;
  label.textContent = String(count); // 手动把改好的值写回界面
});
​

这段代码并不难，难的是应用变大之后。十个互相牵制的状态、几十个需要同时更新的 DOM 节点，你必须在脑子维持一张"哪个数据影响哪个节点"的对应表。漏一个就出 bug，且极难定位——这就是常说的意大利面条式代码的由来。

三、结构化探索：MVC 与 MVVM 的试水

于是有了早期框架。Backbone 给代码提供了 Model、View、Collection 的分层，让"数据"和"表现"不再糊在一起，但视图更新仍要手动完成，它更像结构约束，不是省心。AngularJS 引入了双向数据绑定和脏检查，靠扫描整个作用域来发现变化，理念向前了一大步，可应用一大会非常费——每触发一次检查就要全量比对。

这两代的共同教训是：分层有用，但"变化到底该由谁通知谁"这个核心问题没有彻底解决。

四、现代框架：组件化与声明式

react、Vue 这一代把答案补齐。关键词有两个，你可以把它理解成表与里：

• 声明式：你只描述"在某个状态下，界面应该长什么样"，剩下的"算出差异、更新 DOM"交给框架。代码从"how to do"变成"what should be"。这直接消掉了人肉同步状态那张表。
• 组件化：应用被拆成一个个自包含的单元——每个单元自己管状态、管表现、通过清晰的对外接口和别人通信。复用的单元越多，重复劳动越少，这也是整套教程反复讲的比稿对象。

一条演进时间线能把这四步串起来，图如下。

图：前端演进四阶段时间线

五、同样的计数器，声明式怎么写

拿上一节那枚计数按钮做个对照，声明式写法就不再是"每一步都亲自改界面"，而是"告诉框架你想表达什么"：

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      已点击 {count} 次
    </button>
  );
}
​

看清楚差别了吗？你不再需要 getElementById 去定位那个标签，也没有 textContent = ... 这一步同步。你只写了"点按钮就把 count 加一，界面上显示 count"，剩下"哪个节点要变、怎么变"交给框架。代码量看起来没少多少，可当状态从 1 个涨到几十个、节点从几个涨到上千个，"不用人肉维护那张对应表"的收益会被指数级放大。这就是声明式能统治现代前端的根本原因——它不是写法更优雅，而是把复杂度转移给了框架去统一调度。

六、组件化到底解决了什么

把界面拆成可复用单元，换来四件实在的东西：

这四条在后面贯穿始终。第 3、4 章的每个机制都在服务"让组件能自包含又简洁地运转"。

需要注意的是，组件化并不是"拆得越细越好"，它与"声明式"一样有成本：组件接口要设计、通信要规划、层级要维护。什么时候大力拆、什么时候保持朴素大块，正是这套教程贯穿的"比稿评审"主题——第 2.1 节会给出可操作的三问评审，这里先理解到"组件化是应对复杂度的必然、但需付出接口设计成本"这一层即可。

七、给新手的一点提醒

读演进史最容易犯的错是"只记结论不记过程"。比如记住了"AngularJS 用脏检查所以慢"，却不知道它替前端证明了"绑定可以自动做"。下一次你面试时被问"为什么现代框架离不开虚拟 DOM"，答案的前半段就藏在 AngularJS 的脏检查里——它是"全量粗暴比对"的参考系。也正是因为每一代都留下了经验与教训，组件化才会演得如此快。把这一节当故事读，比当考点背收获更大。

本节要点回顾

• 一条演进线：命令式手搓 → MVC/MVVM 分层 → 声明式 + 组件化，是应对复杂度升级的必然。
• 声明式的实质：你描述"要什么"，框架负责"怎么变"，人肉同步状态这步被框架接管。
• 组件化的本质：自包含、可复用、接口清晰的 UI 单元，是复用与维护的载体。
• 早期框架的遗产：分层和绑定思路被继承，但"效率 + 易维护"这个平衡到现代框架才落地。

下一节我们进入两条路线的分岔口：同样高举组件化，React 走声明式、功能式，Vue 走模板式、渐进式，差在哪。