Tools · Frontend · React

React 不是框架,是套思路

React 官方自己说它是一个库(library)不是框架(framework)—— 这个区别有意思。它给你的不是一整套"按部就班"的开发方式,而是一种用组件描述 UI、用状态驱动 UI的思路。剩下的怎么搭、用什么路由、用什么数据层,全是你自己定。这一手好坏都有,咱们一节一节看。

问React 是什么东西类别Tools / Frontend 读时~25 min

路线图

从一句话定义,走到 2026 年的 React

这一路 6 站:先告诉你 React 是个啥、谁搞的;然后拆开看它的内核(组件 / JSX / 状态);再讲它当年解决了什么真问题、又带来了什么新麻烦;倒数第二站讲 React 不是单一工具,是一摞东西的生态;最后讲 2026 年这一行长什么样 —— React 19、Compiler、AI 写代码,这些咋回事。

Roadmap. 答案散在各节,综合判断段会再收一次。

React 是什么 + 怎么来的

一句话先讲清:React 是一个用来写网页/手机 App 界面的 JavaScript 库 —— 现在归 Meta(原 Facebook)和一大堆社区开发者一起维护。¹

这事儿的来历挺有意思。2011 年,Facebook 一个叫 Jordan Walke 的工程师,被自家 News Feed 的烂代码逼急了 —— 那个年代写网页,JavaScript 就是一锅意大利面,数据一变界面就跟不上,得手动 DOM 操作一通改,出 bug 是日常。Walke 受 Facebook 自家 PHP 工具 XHP 的启发,弄出了一个原型,叫 FaxJS,后来改名 React。²

2011 年 React 先在 News Feed 上线,2012 年 Instagram 也用上了。Instagram 那边人想用 Facebook 的内部工具,React 团队就把它从内部代码里拆出来 —— 2013 年 5 月在 JSConf US 大会上正式开源。当时还有个小段子:演讲完台下一片沉默,大家都觉得这玩意太奇怪 —— 把 HTML 写在 JS 里?这不疯了吗?²

结果几年下来,React 反而成了前端这一行的事实标准。

关键节点	事件
2011	Jordan Walke 写出 FaxJS 原型,Facebook News Feed 内部用
2012	Instagram 接入
2013-05	JSConf US 开源,Apache 2.0 协议
2015	React Native 发布(用 React 写原生 App)
2019	Hooks 发布(useState / useEffect 全套)
2022	React 18 + Concurrent Mode
2024-12	React 19 发布 —— Server Components / Actions / use API 全套稳定
2025-10	React Compiler 1.0 稳定版发布

反证

"React 不是框架而是库" 这事儿你别太较真。从理论上 React 确实只管 UI 这一层,路由、数据、打包工具都得你自己接 —— 这是"库"的特征。但实际上,2026 年绝大多数人用 React 都是借着 Next.js 这种 meta-framework 用的,React + Next.js + 一堆默认配置 = 体感就是个框架。³

说白了 React 自己端着"我是个库"这架子,生态早就把它喂成框架了。

三件套:组件 + JSX + 状态

咱们看 React 的内核。说白了就三样东西:组件(component)、JSX(那个 HTML 写在 JS 里的怪语法)、状态(state)。三个加起来就是 React 的全部哲学。

组件 —— 把 UI 拆成可复用的积木

React 让你把界面拆成一块一块的组件,每个组件就是一个 JavaScript 函数,函数里返回一段"长得像 HTML"的东西。一个按钮是一个组件,一个表单是一个组件,一个页面也是一个组件 —— 组件可以套组件,像积木一样拼出整个 App。⁴

JSX —— 把 HTML 写在 JS 里

这是 React 当年最让人觉得"反人类"的设计。十几年前,前端这行的金科玉律是"关注点分离" —— HTML 管结构、CSS 管样式、JS 管逻辑,三家分立。React 一来直接说"不,你把 HTML 写到 JS 函数里去"。所有人都觉得这是邪教。

结果用着用着,大家发现这事儿其实合理 —— 因为一个组件的"长什么样"和"行为是啥"本来就是一回事,硬拆开反而麻烦。⁵

举个具体的

一个最简单的 React 计数器组件长这样:

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

三个东西全在了:组件(Counter 这个函数)、JSX(那段长得像 HTML 的 return)、状态(useState 出来的 count)。你点一下按钮,count 加 1,React 自己重新渲染,数字就变了 —— 你不用碰 DOM,你只描述"应该长什么样",剩下 React 替你算。

状态驱动 UI —— React 的核心思想

这是 React 最值钱的一手。传统写法是"数据变了我去手动改 UI",React 翻过来:你只描述"在这个数据下,UI 应该长什么样",数据一变 React 自己重新算一遍 UI。这种叫法在学术上叫"声明式 UI"(declarative UI),跟过去的"命令式"(imperative)对应。¹

Fig 1. React 的核心数据流。中间那个"虚拟 DOM"是 React 在内存里搞的一份 UI 镜像,它对比前后两份镜像,算出最小的真实 DOM 修改集,这样性能就稳。

它到底解决了什么

要知道 React 解决了什么,得先看 React 没出来之前是什么样。2010 年前后,前端写网页是这样的:用 jQuery 去手动选中 DOM 元素,然后手动改它的内容、样式、class —— 类似下面这种风格:

需求	jQuery 时代(命令式)	React 时代(声明式)
计数器加 1 并显示	"找到 #count 元素 → 读出旧值 → 加 1 → 写回去"	"setCount(count + 1)" —— UI 自动跟着变
用户登录后显示用户名	"找到 #username 元素 → 把它的文字改成新用户名 → 还要记得改右上角那个头像"	state 里 user 一变,所有用 user 的组件自动更新
切换标签页	"隐藏旧 tab → 显示新 tab → 改 active class → 别忘了同步其它依赖的地方"	state 里 activeTab 一改完事

你看出来没?左边那一栏的关键词是"记得" —— 记得改这里、记得改那里、记得同步状态。一个页面有 10 处地方依赖一个数据,你就得改 10 处。漏一处就是 bug。⁶

React 这一手把整个事情翻过来:你别去记"该改哪儿",你只说"如果数据是 X,UI 就该长成 Y" —— 剩下的 React 替你管。这事儿听着小,但是把前端开发的复杂度量级砍了下来。这就是为什么 React 一出来就席卷整个行业的原因。

反证

有人会说"那虚拟 DOM 不是性能负担吗?直接改真 DOM 更快才对啊。" —— 这话部分对。极致单点性能 Vanilla JS 或者 Svelte(编译时优化)确实更快。但 React 的卖点从来不是"我最快",而是"我让你不用想性能就能写出够快的复杂界面" —— 在中大型应用上,这换来的可维护性远比 5% 的性能差异值钱。

它带来了什么新麻烦

React 解决了老问题,但也带来了一摞新麻烦。这一节得诚实讲 —— 2025 / 2026 年说"我要 ditch React"的开发者一抓一大把,他们不是无理取闹。⁷

痛点	具体长啥样
useEffect 黑洞	本来用来"处理副作用"的钩子,被人滥用成万能锤。依赖数组写错一个就死循环或者漏更新,十年下来踩坑无数。React 团队自己有人发推说 useEffect 是个 mistake。⁸
Hooks 规则诡异	"hooks 不能写在 if 里"、"必须按固定顺序调用" —— 这些规则不直觉,因为 hooks 内部就是靠调用顺序来认变量的。初学者第一次踩坑大概率在这儿。
re-render 不可控	组件什么时候重新跑你得自己算明白。一不留神某个父组件状态变了,整棵子树跟着 re-render,卡得要命。所以你得到处撒 useMemo / useCallback —— 这玩意儿被人吐槽成"性能税"。⁹
生态卷成红海	"会 React" 这事儿在 2026 年的招聘市场就是基本款。Stack Overflow 2025 调研里 44.7% 的开发者在用 React¹⁰ —— 普及到没人当本事看了。
Server Components 复杂度爆炸	React 19 把 Server Components 推上正式。它确实降低了网络流量,但是"哪些代码在服务器跑、哪些在浏览器跑、什么时候穿越"这个心智模型,把已经够复杂的 React 又叠了一层。

常见错答

你以为"useEffect 就是 React 版的 'componentDidMount'"?不是。这是 React 团队自己后来承认的误导命名。useEffect 真正的语义是"在渲染完成后跟外部世界同步副作用",不是"组件挂载后跑一次"。所以你看到的大量"在 useEffect 里 fetch 数据"代码,其实都是反模式 —— 现在的正确做法是用 use() 或者 Suspense + Server Components 拉数据。¹¹

但话说回来 —— 上面这些麻烦虽然真实,但都不致命。React 还是能给你写出生产级的 App,只是你得花时间学一摞 best practice 才能用得舒服。新手友好度这事儿,React 在 2026 年绝对算不上行业最强(那是 Vue 和 Svelte 的强项)。

生态:不是一个东西,是一摞东西

你说"我要学 React",听起来是学一个东西。其实你要学的是一整套生态。React 本身就管 UI 渲染,剩下的都得你自己拼:

层	角色	主流选择
核心库	UI 渲染	React 本身
Meta-Framework	路由 / SSR / 打包 / 数据获取一条龙	Next.js(Vercel 出的,2026 主流)/ React Router 7(Remix 改名后的样子)/ TanStack Start(新生力量)³
UI 组件库	给你现成的按钮、表单、对话框	shadcn/ui / Radix / Material UI / Ant Design
状态管理	跨组件共享数据	Zustand / Jotai / Redux Toolkit / TanStack Query
样式	怎么写 CSS	Tailwind CSS(2026 绝对主流)/ CSS Modules / styled-components
跨端	用 React 写手机 App	React Native(Facebook 出)/ Expo(国民级配套)

所以你听人说"用 React 写一个 App",大概率背后还藏着 Next.js + Tailwind + shadcn/ui + TanStack Query 这一整套。这个组合在 2026 年是无数初创公司的默认配方。¹²

反证

生态里有件不太好的消息 ——Remix 已经死了。Remix 这个曾经的 React 二号 meta-framework,2025 年被它的母公司 Shopify 合并回了 React Router 7;紧接着 Remix 团队宣布Remix 3 fork Preact,正式离开 React 生态。这是 React 生态近年最大的分裂事件 —— 等于一个核心 maintainer 团队拍桌子走了。³

这事儿意味着 2026 年想用 React 写 meta-framework,选项基本就剩 Next.js 一家独大 + TanStack Start 这个新生力量。这种"被 Vercel 牵着鼻子走"的格局,有些老前端是不爽的。

2026 年的 React

到 2026 年 5 月,React 这一行有三件大事在同时发生:

大事	是啥	对你意味着
React Compiler 1.0	2025 年 10 月稳定。一个自动给你的代码做记忆化(memoization)优化的编译器。¹³	你不用再到处手动写 useMemo / useCallback 了,编译器替你做。"性能税"这事儿被部分免掉了。
Server Components 全面铺开	React 19 + Next.js 14+ 默认所有组件先在服务器跑,只把必要的 JS 送到浏览器。¹⁴	JS 包体积砍 30-50%,首次加载快了不少。但心智复杂度上去了 —— 哪段代码跑在哪边,你得想明白。
AI 写 React	Cursor、v0、Claude Code 这些工具能直接帮你生成 React 组件,从设计稿到能跑的代码 30 秒搞定。	"还原 Figma 稿"这种活儿基本被 AI 接管了。React 开发者真正的价值越来越在架构判断和跟设计师吵架上。

思考一下

2026 年初学 React 的人,跟 2016 年初学的人不是同一群人了。十年前你学 React 是为了能找工作;现在你学 React 更多是为了能跟 AI 高效协作 —— 你得能看懂 AI 给你的代码、能指出哪里写得不对、能描述清楚架构,而不是自己一行行手写。

这就回到一个老问题:你学 React 的目标是啥?是为了"我能写"还是"我能判断"?这两条路,2026 年的 ROI 已经分叉了。

另一件事得提一下:React 这两年的发展节奏明显被 Vercel 这家公司牵着走了 —— Server Components、Actions、Next.js 的所有新特性,基本都是 React 团队和 Vercel 一块儿推的。这事儿好坏都有:好的是有商业公司出力推,坏的是 React 团队的中立性变弱了。这是 2026 年 React 社区一个明里暗里的争议点。

综合判断

React 是 2010 年代前端的转折点

把这一路收一收,直接回答你最早的问题 ——

React 就是 2011 年 Facebook 工程师 Jordan Walke 为了救自家烂代码搞出来的一个 JavaScript 库,2013 年开源。它最值钱的不是 JSX 那个怪语法,也不是虚拟 DOM 那个工程细节,而是一种翻转性的思想 ——你别去管"该改哪儿",你只描述"数据 X 下 UI 该长啥样",剩下让 React 替你算。这事儿听着小,但把前端开发的心智复杂度量级砍下来了。这就是为什么 React 一出来就把整个行业改写了。

到 2026 年,React 还是前端这一行的事实标准 —— Stack Overflow 调研里 44.7% 的开发者还在用,生态最大、招人最多、文档最齐。但它也老了 —— hooks 心智负担、useEffect 黑洞、Server Components 又叠一层复杂度,这些都让一部分人开始往 Vue、Svelte、Solid 跑。Svelte 的开发者满意度(62.4%)甚至超过了 React(52.1%)。¹⁰

所以如果你今天问"我该不该学 React?" —— 答案是该。不是因为它最好用,而是因为它最普及 —— 工作机会、AI 训练数据、社区文档全都偏向它,这种网络效应在未来 5 年不会动。但你得做好心理准备:学 React 不是学一个库,是学一整套生态(React + Next.js + Tailwind + shadcn + TanStack Query),而且这套东西每两年还会大换一轮。

最后给一个老前端的实话:React 这套思想已经赢了,你纠结的不该是"学不学",而是"学多深"。在 AI 帮你写代码的 2026 年,深到能判断架构、能跟设计师吵明白、能 review 出 AI 写的烂代码 —— 这个深度才是真值钱。

不确定性

这块儿我也没看全

React 的下一个十年走向。Server Components 是个赌博 —— 它可能把 React 推到新高度,也可能因为太复杂把一批人推走。三年内见分晓。
Vercel 对 React 的控制力。Vercel 实际上变成了 React 生态的"另一个 Meta",但它是商业公司不是非营利。这种深绑定有商业风险,有人会担心。🟡 med
React Native 的命运。Meta 内部 React Native 团队 2025 年传出多轮裁员,这块儿"用 React 写手机 App"的故事 2026 年能不能继续讲下去,我没把握。
AI 时代下"前端工程师"角色本身。如果 Cursor + v0 + Claude Code 五年内能自动生成 90% 的 React 代码,那"会 React" 这事儿的市场价值会重新洗牌 —— 但具体怎么洗,现在没人能拍胸脯。

引用

Sources

React (JavaScript library) · Wikipedia — en.wikipedia.org
The History of React.js: From Facebook's Internal Tool to Global Phenomenon · Zeeshan Ali — zeeshan.p2pclouds.net
React Frameworks in 2026: Next.js vs Remix vs React Router 7 · Medium (Pallavi Lodhi) — medium.com
Your First Component · React.dev — react.dev
Writing Markup with JSX · React.dev — react.dev
Front-end frameworks popularity (React vs jQuery 时代背景) · GitHub Gist — gist.github.com
Why I Decided to Stop Working with React.js in 2025 · DEV Community — dev.to/holasoymalva
Hooks are the worst thing to ever happen to React · Hacker News thread — news.ycombinator.com
The Ugly side Of React Hooks · The Startup, Medium — medium.com/swlh
React vs Vue vs Angular: Which Should You Choose in 2026? (引 Stack Overflow 2025) · Medium — medium.com
Hello React, Goodbye useEffect (I Hope) · DEV Community — dev.to/imamdev_
The 2026 Frontend Framework Guide Nobody Asked For (But Everyone Needs) · Medium — medium.com
React 19 Complete Guide: Server Components & Actions (2026) · SoftAims — softaims.com
React v19 · React 官方 blog — react.dev/blog