我曾经疯狂折腾前端工具。

Vue、Vue Router、Pinia、React、React Router、TanStack Router、TanStack Query、Zustand、Jotai、Vite、Rspack、各种 CSS 方案、各种组件库...

每次看到新工具，第一反应是："我是不是又得学？"

每次选型，都会陷入纠结：

  • React Router 和 TanStack Router 到底选哪个？
  • Zustand 和 Jotai 怎么选？
  • SWR 和 TanStack Query 怎么选？
  • 新框架、新编译器、新 CSS 方案是不是又该学？

折腾到最后，我发现这些东西并不是最值得内化的知识。

一、我为什么曾经疯狂折腾工具

2026 年的前端生态：

工具越来越多。框架、Router、State Manager、Data Fetching、CSS、Bundler、Compiler 都在快速变化。

我不是在抱怨生态。生态活跃是好事。

但我陷入了一种思维模式：

"既然有更好的，为什么不用更好的？"

于是不断尝试新工具，不断切换技术栈，不断学习新的 API。

最后发现，如果一直追工具，就会陷入无限循环。

今天的最佳实践，明天可能就被替代。今天的"银弹"，明天可能就被吐槽。

二、我真正学到的东西，不是这些工具

但折腾并没有浪费。

比较 Vue 和 React、React Router 和 TanStack Router、Zustand 和 Jotai、不同工程化工具的过程中，我实际上是在不断暴露底层问题。

Router 让我理解：

URL State
Routing
Data Loading
Navigation

Zustand / Jotai 让我理解：

Client State
Subscription
Granularity
Reactivity

TanStack Query / SWR 让我理解：

Server State
Cache
Fetching
Synchronization

Vite / Bundler 让我理解：

Module Graph
Transform
Build
Code Splitting
Runtime

所以工具不是没有价值。

工具是学习底层模型的入口。

通过折腾不同工具，我理解了它们背后的问题空间。

三、最后留下 TypeScript

TypeScript 不是因为它最流行，而是因为它是语言层。

类型系统、结构化类型、泛型、类型推导、Union、Conditional Types...

这些知识不会因为 Router 换了就失效。

// 这些概念是语言层的，不依赖任何框架
interface User {
  name: string
  age: number
}

function greet<T extends User>(user: T): string {
  return `Hello, ${user.name}`
}

工具可以换，但语言层的思维不会轻易换。

我写的 TypeScript 系列，就是在尝试建立这种底层模型。

四、最后留下 React

不是因为 React 生态最多。

而是因为 React 本身值得理解。

Component
State
Rendering
Reconciliation
Fiber
Scheduler
Lane
Effect

React 是 UI 编程模型。

Router、State Manager、Query Library 都是在这个模型之上解决具体问题。

所以我真正需要内化的是：

React 为什么这样工作，而不是背 React 生态里有哪些库。

理解了 Fiber，就理解了为什么 React 能中断渲染。 理解了 Lane，就理解了为什么 React 能区分优先级。 理解了 Effect，就理解了为什么副作用要脱离 Render。

这些理解，不会因为换了一个 Router 就失效。

我写的 React Runtime 系列，就是在尝试建立这种模型。

五、最后留下 Browser

这是最底层、最容易被框架隐藏的一层。

DOM
Event
Event Loop
Task / Microtask
Network
Rendering Pipeline
Layout
Paint
Compositing

最终：

React 描述 UI
        ↓
DOM
        ↓
Browser
        ↓
Reality

框架不是运行环境。

理解 Browser，才能真正理解 React 为什么需要某些机制，以及性能问题到底发生在哪里。

我写的 浏览器渲染管线，就是在尝试理解这层。

六、工程化 / 架构其实是一回事

这里不要把工程化和架构硬拆成两个领域。

从实际开发角度，它们共同解决：

当代码和系统越来越复杂以后，如何组织复杂度，并让系统继续演化。

包括：

Module
Dependency
Build
Monorepo
State
Data
Routing
Composition
Boundary
Package
Deployment

工具只是实现这些思想的不同方式。

例如：

React Router / TanStack Router
    → 都是 Routing 问题的不同实现

Zustand / Jotai
    → 都是 Client State 问题的不同实现

Vite / Rspack / Webpack
    → 都是工程化问题的不同实现

因此真正应该学习的是问题本身，而不是工具名字。

我写的 路由系列 和 Vite 指南，就是在尝试理解这些问题。

七、所以我的技术栈收敛成了什么

TypeScript
    ↓
React
    ↓
Browser
    ↓
工程化 / 架构

TypeScript

语言层。表达程序的能力。

React

UI 编程模型。描述 UI 的方式。

Browser

运行环境。代码最终在哪里执行。

工程化 / 架构

系统组织方式。如何管理复杂度。

形成：

Language
   ↓
UI Model
   ↓
Runtime
   ↓
System

八、以后遇到新工具怎么办

以后遇到：

  • React Router v8
  • TanStack Router 新版本
  • Rspack
  • StyleX
  • 新的 State Manager
  • 新的 CSS 方案
  • 新的 React Framework

不再第一反应：

"我是不是又得学？"

而是：

它解决什么问题？
        ↓
这个问题我是否已经理解？
        ↓
它和已有方案有什么区别？
        ↓
这个项目是否真的需要？
        ↓
需要就学
不需要就跳过

如果底层模型已经掌握，学习新工具就从"重新学习一个世界"变成"学习一个 API"。

九、最终的技术观

前端真正值得长期投资的，不是某个工具的熟练度，而是理解工具背后的模型。

TypeScript
    ↓
我如何表达程序

React
    ↓
我如何描述 UI

Browser
    ↓
代码最终在哪里运行

工程化 / 架构
    ↓
我如何组织一个复杂系统

工具会变，框架会变，生态会变，但底层模型不会每天都变。