01|React 真正切进来的,不是一个“框架空位”,而是一套旧心智的疲劳

前一篇讲到,

BackboneKnockoutEmberAngularJS 都在认真回答同一个问题:

浏览器应用到底该怎样被组织。

可这些路线虽然差别很大,

底下还是有一层共同气质:

  • 模板很重要
  • 绑定关系很重要
  • 框架负责组织视图和数据的关系
  • UI 更新往往仍然像“我要想办法把界面改成正确样子”

这套心智在 2010 年前后当然合理。

因为它确实比“页面脚本 + 库 + 插件”前进了一大步。

但随着前端继续变重,

另一种疲劳会慢慢出现:

为什么一套应用的复杂度越大,开发者越容易被模板、绑定、局部状态和手工协调拖得越来越累?

这就是 React 真正切进来的位置。

它不是在说:

“我也来给你做一个更好的 MVC。”

它是在直接改写问题本身:

别再问界面该怎么被局部修补,改问:如果 UI 本来就是状态的结果,那我们为什么不直接重新渲染它?


02|所以 React 的第一句狠话才会是:我根本不是 MVC

React 早期最值得记住的一篇文章,就是 2013-06-05 的那篇:

Why did we build React?

这篇文章最关键的,不是里面讲了多少 API。

而是它一上来就把自己的位置摆得很明确:

React isn’t an MVC framework.

这句话特别重要。

因为它说明 React 从一开始就不想在旧赛道上竞争。

它不是要和 BackboneAngularJSEmber 比:

  • 谁的模板更强
  • 谁的绑定更自然
  • 谁的控制器写法更顺

它是想把赛题本身换掉。

它更像是在说:

别把 UI 理解成一堆需要你手工维护的 DOM 关系,应该把它理解成状态在某个时刻的描述结果。

这一步非常关键。

因为一旦你接受这套前提,

很多老问题就会被重新命名:

  • 模板不再是唯一核心
  • 局部 DOM 操作不再是思维起点
  • 视图更新不再主要靠“我该改哪块”
  • 组件会变成最重要的组织单位

也就是说,React 最先改写的不是代码写法。

而是:

开发者理解 UI 的方式。


03|组件、JSX、Virtual DOM,真正组合出来的是一套新语法政治

很多人谈 React 的成功时,

会特别喜欢抓一个点。

比如:

  • JSX
  • Virtual DOM
  • 组件化
  • 单向数据流

这些当然都重要。

但如果只抓一个点,就会把 React 写浅。

因为 React 真正厉害的,不是某一个单点发明。

而是它把几个当时都挺有争议的东西,硬是组合成了一整套新语法政治。

组件为什么先改写了 UI 的基本单位

组件让 UI 不再主要按页面片段或模板块理解,

而开始按:

可以复用、可以组合、可以局部封装状态和行为的单元

来理解。

JSX 为什么真正挑战的是模板与逻辑分治

JSX 当年争议特别大,

因为它直接挑战了一种长期默认:

模板和逻辑应该尽量分开。

React 的态度更像:

如果视图本来就是状态的计算结果,

那标记和逻辑为什么一定要分家?

这不是小修小补。

这相当于把一整套“前端该怎样看待视图层”的常识打松了。

Virtual DOM 为什么更像现实路径,不是信仰本体

Virtual DOM 当然重要。

但它最初真正关键的地方,更多像是:

给“全部重新描述 UI”这件事,找到一个现实里可运行的实现路径。

也就是说,

它首先是手段。

不是宗教本体。

后来社区把它讲得越来越神,

甚至讲成一种决定成败的终极信仰。

可如果回到早期 React 的语境,

你会发现它最本质的作用其实是:

让状态驱动渲染这套心智,在复杂 Web 应用里真的落地。


04|React 真正赢下来的,是“状态 -> 界面”这套解释权

如果只把 React 理解成一个流行库,

你就很难解释为什么它后来的影响会这么大。

因为真正决定它长期外溢力的,

不是某一个 API 设计得多漂亮。

而是它逐渐把一整套 UI 解释权拿了下来。

以前很多人的默认直觉是:

  • 界面是要被管理的东西
  • 模板是中心
  • 控制器或绑定负责把数据和界面缝起来

React 慢慢改写成了另一种默认:

  • 状态是中心
  • UI 是状态的投影
  • 更新界面不是“找地方修改”,而是“重新计算应该长什么样”

这套解释权一旦拿下来,后面的很多东西就都会跟着重排:

  • 组件边界怎么定义
  • 数据流怎么组织
  • 状态管理为什么会重要
  • FluxRedux 为什么会有传播力
  • 为什么后面大家越来越爱谈“单向数据流”

你会发现,

React 并不是在简单提供另一套工具。

它是在接管一整套问题的表述方式。

而谁掌握了问题的表述方式,

谁就更容易掌握后面的默认答案。


05|React 早期也不是天生王者,它是先看起来很怪,后来才慢慢被现实抬起来的

这点也必须写出来。

因为如果把 React 写成一个一出场就无敌的正确答案,

也会失真。

早期 React 很多地方都让人不舒服:

  • JSX 看起来像把 HTML 写进 JS
  • Virtual DOM 听上去像又套一层抽象
  • 它还公开说自己不是 MVC
  • 它一开始甚至不想包办所有事

这些都让它在起步阶段显得有点“异类”。

One Year of Open-Source React 那篇回顾里就写得很坦白:

大家最初的反应并不都买账,

尤其 JSX 一度挡掉了很多潜在早期采用者。

这恰恰说明 React 的历史节奏不是:

它一出场大家就立刻承认“这就是未来”。

而是:

它先挑战既有常识,随后现实世界慢慢发现,这套新心智在复杂 UI 上确实更稳、更统一、更容易继续扩张。

所以 React 的胜利很像一种后发收编。

不是靠“更符合旧常识”赢。

而是靠:

先把旧常识打破,再让现实世界慢慢适应新常识。


06|React 改写了 UI,但它最开始并没有独自解决全部问题

这也是它特别厉害的一点。

它一开始其实很克制。

它没有像 AngularJSEmber 那样,立刻把自己包装成一整套全家桶秩序。

它先做的是视图层。

这会带来两种完全不同的后果。

第一,它更容易被接进现有项目。

第二,它会把周边问题继续释放出来。

比如:

  • 状态怎么管
  • 路由怎么接
  • 构建怎么配
  • 类型怎么做
  • 脚手架怎么给

这在短期里看,好像是“没包圆”。

可从长期看,反而构成了它的扩张优势。

因为这意味着 React 可以先靠新心智切进来,

再慢慢把生态、工具链、文档、脚手架一层层接上。

这就是为什么后来 React 的影响力,

不只是来自 React 本体。

它还会来自:

  • Babel / JSX 工具链
  • create-react-app
  • Redux
  • Next.js
  • 文档与生态习惯

所以 React 真正可怕的地方不只是改写 UI。

还在于:

它用一个相对克制的起点,拿到了后来继续外扩的巨大空间。


07|React 留下来的,不只是份额,而是一整套默认心智

为什么 React 这篇一定要单独写?

因为今天现代前端里很多看起来已经像空气的东西,

其实都是它这轮改道留下来的。

比如:

  • 组件化是默认前提
  • 单向数据流是默认理性
  • 状态驱动视图是默认心智
  • “重新渲染”不再显得天然荒谬
  • JSX 这种混写方式已经被大量人接受

甚至很多后来不属于 React 阵营的框架,

其实也在不同程度上被迫回应它提出的问题:

  • UI 是否该直接从状态推出来
  • 模板和逻辑到底该怎么分
  • 运行时该承担多少渲染与协调工作

所以 React 真正改写的,不是一个框架份额图。

而是:

现代前端理解 UI 的默认语言。

这就是为什么它后来会把后面的战争也一起改写。

因为一旦问题被它重新命名了,

后续所有竞争者就都必须回应它。

下一篇要讲的,就是另一条非常典型、但打法完全不同的主流路线:

为什么 Vue 的突围不只是“更友好”,而是它把采纳成本和治理摩擦压到了更低。


参考与延伸阅读

  1. Why did we build React?
    https://legacy.reactjs.org/blog/2013/06/05/why-react.html

  2. React: Rethinking best practices - JSConf EU 2013
    https://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html

  3. Pete Hunt: React: Rethinking best practices -- JSConf EU
    https://www.youtube.com/watch?v=x7cQ3mrcKaY

  4. React v0.4.0
    https://legacy.reactjs.org/blog/2013/07/17/react-v0-4-0.html

  5. Community Round-up #1
    https://legacy.reactjs.org/blog/2013/06/12/community-roundup.html

  6. One Year of Open-Source React
    https://legacy.reactjs.org/blog/2014/05/29/one-year-of-open-source-react.html