单页应用与 React 的四个核心想法Copy Anchor Link

这一章讲什么: 为什么今天的 Web 应用要建成「单页应用(SPA)」, React 是靠哪四个想法立足的,以及一个 React 项目从脚手架到跑起来长什么样。 读完你会理解 React 世界里最重要的一个区分:「重新渲染」和「改页面」根本不是一回事。

1. 先讲历史:网页本来是一页一页的文件Copy Anchor Link

最早的 Web 就是静态 HTML 文件:输入网址,服务器还你一个文件¹。 后来人们想在服务器上动态拼页面,于是有了 CGI 和服务器端渲染(SSR)—— 浏览器每发一次请求,服务器现算一份完整的 HTML 寄回来²。 不管静态还是 SSR,模式都一样:以「页」为单位,任何像样的内容变化都要整页重载³。

问题出在对照组。同一时期的原生应用(桌面、手机)是另一种体验: 整个应用装在设备上,打开即用,画什么界面都在本地代码里,不需要为「换屏」 惊动服务器——只是为「取数据」才联网⁴。所以原生应用感觉明显更快、更跟手。

SPA 就是把这个「原生体验」搬到浏览器里:应用全下载下来在客户端跑, 不再一页一页等服务器⁵。这本书要建的正是这种应用。

2. SPA 的四张名片Copy Anchor Link

原书列了单页应用共有的四个特征,无论用 React、Angular 还是 Vue 都成立⁶:

虚拟路由值得多讲一句,它是 SPA 和经典 Web 最直观的分界。经典路由里, URL 一敲回车,请求就发回服务器;虚拟路由里,URL 指的服务器路径根本不存在, 回发永远不会发生——应用把 URL 当作内部不同「屏」之间的逻辑分隔, 某些 URL 出现时就触发某些行为⁷。你在地址栏里看到「跳转」, 全程没有离开过浏览器。

代价也如实交代:SPA 的组件和库多,构建更复杂——只是现代工具 (Vite 这类)已经把这层开销压得够低⁸。

3. React 的四个核心想法Copy Anchor Link

浏览器拿到 HTML 后,会把它解析(把文本逐层读成结构)成一棵逻辑树,叫 DOM(文档对象模型)—— 页面上所有元素、它们的顺序和嵌套关系都在树上⁹。所有网站都有 DOM; React 的独特之处在于围绕它建立的四个想法¹⁰:

  ① 组件        UI 拆成自包含、可复用的零件,从小到大拼装
  ② 声明式渲染   你只说「界面应该长什么样」,怎么改 DOM 由 React 决定
  ③ 虚拟 DOM     React 在内存里另养一棵树;状态变了就重建、比差异、只改该改的
  ④ state/props  组件自己的会变数据叫 state;父组件传下来的叫 props;
                  两者一变,React 重新调用组件函数

  图说:①是分工,②是风格,③是手段,④是扳机。四件事合起来 = React。

想法②是 React 的定义性特征。 老写法(jQuery 那代)是命令式: 你一步一步告诉浏览器「删掉这个节点、加上那个节点」。React 是声明式: 你声明「状态是 X 时界面长这样」,剩下的事它办¹¹。

想法③有一个广为流传的误解,原书专门纠正:虚拟 DOM 的价值不是让 React 比直接操作 DOM 更快——纯性能角度它往往还略慢一点;它的真正价值是 撑起声明式的编程模型,并且把「渲染目标」抽象掉了(所以同一套 React 还能驱动 React Native 这样的非浏览器界面)¹²。机制上:状态变化时,React 在内存里 建一棵新的虚拟树,和旧的比差异(render phase,渲染阶段), 再把必要的改动应用到真 DOM 上(commit phase,提交阶段)—— 比较全程发生在 React 的两棵内存树之间,根本不碰浏览器 DOM¹³。

想法④是全书后面所有章节的发动机。 组件有自己的本地状态 state, 也从父组件收 props;任何一个变化,React 就重新调用组件函数、产出新的 虚拟 DOM¹⁴。注意这句话的精确含义,本书主线例子就建立在它上面:

「重新渲染」= React 把组件函数再调一遍。 它不意味着真实 DOM 被重写—— 真实 DOM 改不改、改哪里,由第 ③ 步的比对结果说了算¹⁵。

书里还补了 2026 年的坐标:React 早已不只是「虚拟 DOM 库」——18 版加入 并发渲染(React 可以暂停、恢复手头工作以保持界面响应)和 Suspense (以声明式方式处理异步数据和代码加载);更新的版本又加入 Server Components 和 Server Actions,把客户端渲染和服务器渲染的界线也模糊了¹⁶。 这本书的主体仍然是经典的客户端 SPA,但这些名词后面会再次出现。

4. 主线例子:一个计数按钮走完 React 的一生Copy Anchor Link

Vite 脚手架生成的默认 App.tsx 里有一个计数按钮,这就是本章主线例子。 从头走到尾:

function App() {
  const [count, setCount] = useState(0)   // state:count,初值 0

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      count is {count}
    </button>
  )
}

第 ① 步:初始渲染。 main.tsx 是入口:createRoot 找到 HTML 里 id="root" 的那个空元素,把 <App /> 挂进去,整个应用从这棵树开始长¹⁷。 按钮第一次出现在屏幕上,文字是 count is 0。

第 ② 步:点击。 onClick 回调执行 setCount(0 + 1),state 从 0 变 1。

第 ③ 步:重新渲染。 state 变了,React 把 App 函数整个再调一遍。 这次 return 出来的描述里文字是 count is 1——这是内存里的新虚拟树¹⁵。

第 ④ 步:比对与提交。 React 拿新树和旧树比:整个按钮只有那行文字变了。 于是只更新文本节点这一个地方,按钮本身、页面其他部分一律不动¹³。

第 ⑤ 步:循环。 再点一次,0 → 1 → 2 → 3,每轮都是「调函数 → 比树 → 改最少的地方」。你写代码时从头到尾没有碰过一个 DOM API——这就是 声明式的实际体验¹¹。

例子里还有两个 JSX 细节值得记下:JSX 不是 HTML,是 React 自创的语法, 最终被翻译成普通 JavaScript¹⁸;HTML 属性和 JavaScript 关键字撞名时 React 改名——class 是关键字,所以写 className¹⁹。 花括号 {} 在 JSX 属性里表示「这里面是代码」,不是字符串²⁰。

5. 一个 React 项目由什么构成(Vite 实测)Copy Anchor Link

npm create vite@latest 一条命令生成项目骨架;npm run dev 起开发服务器 (带热重载:改文件页面即时刷新);npm run build 产出部署用的最终文件, 放进 dist/ 目录²¹。2026 年时点的技术底座:Vite 8 已改用 Rust 写的 Rolldown 作为打包器,TypeScript 转译那层用 SWC(也是 Rust 写的)²²。

生成的项目里值得认识的东西²³:

组件的最小形状长这样——FC 是 Functional Component(函数组件)的缩写; 用 Hooks 的话,函数组件是唯一的选择(旧的 class 组件写法已被淘汰)²⁴:

const Home: FC = () => {
  return <div>Hello World! Home</div>;
};
export default Home;

一个组件要被看见,就得被另一个组件包进去——App 是根,所有组件最终都 挂在这棵树上²⁵。return 多个同级元素时需要外壳,<></> 这个不留痕迹的 外壳叫 React Fragment(片段)²⁶。

6. 作者的判断与证据Copy Anchor Link

• 「SPA 的目标是原生应用的体验」是整个论证的起点,证据是对比经典模型 「任何内容变化都要整页回服务器」与原生模型「界面在本地代码里画」⁴⁵。
• 「虚拟 DOM 不是性能银弹,声明式才是价值」是明确纠正流行的误解,并给了依据: 渲染目标被抽象,所以 React Native 才可能存在¹²。
• 并发渲染、Suspense、Server Components 的提及是事实性描述,非作者判断¹⁶。

7. 边界与局限Copy Anchor Link

• SSR/Next.js 只有一句脚注的量:原书承认 Next.js、React Router(原 Remix) 「模糊了客户端渲染与服务器渲染的界线」²⁷,但整本书的落点仍是纯客户端 SPA; 想看服务端渲染怎么落地,本书给不了。
• useState 在这里只是露脸:本章出现了钩子但没有解释原理,「第 5 章详讲」 是刻意留白。
• Vite 的具体架构(Rolldown/SWC)是 2026 年时点,Vite 换代快,数字会过期, 「脚手架 → dev/build 两条命令」的用法不会。

判断(我们的,不是书里的): 把「重新渲染 ≠ 重写 DOM」在第 4 章就钉死, 是这本书前端部分最重要的早期投资——社区里大量「React 性能焦虑」 (动不动就 memo、动不动就怕重渲染)都源于把这两件事混为一谈。 先立正确心智模型再教 Hooks,顺序是对的。 如果错,会错在: 「重渲染廉价」的前提是组件树健康;一旦有人把昂贵的 计算直接塞进渲染体,第 ③ 步「每点一次全调一遍」就真的会变慢—— 所以第 5 章的 useMemo 们不是装饰,是这个模型的必要补丁。

8. 可带走的Copy Anchor Link

1. 经典 Web 以「页」为单位:任何内容变化都整页重载;SPA 把应用整个下载到客户端换响应速度。
2. SPA 四特征:单张 HTML、客户端渲染、预加载资源、虚拟路由(URL 只是内部门牌)。
3. React 四想法:组件(分工)、声明式(风格)、虚拟 DOM + 渲染/提交两阶段(手段)、 state/props(扳机)。
4. 虚拟 DOM 的价值是声明式模型和渲染目标抽象,不是比原生 DOM 快。
5. 「重新渲染」= 组件函数被再调一遍;真实 DOM 改不改、改哪里,由比对决定。
6. JSX 不是 HTML:className 代替 class,花括号里是代码不是字符串。
7. 用 Hooks 就只有函数组件一条路;FC 是它的类型名。
8. 多元素要外壳时用 <></>(Fragment)。

9. 原文地图Copy Anchor Link