React | Zachary

type

status

date

slug

summary

一、技术选型：速度与秩序的平衡

在 2024/2025 年的时间节点，前端工具链正处于从“基于 Node.js”向“基于 Rust/Go”迁移的变革期。作为后端开发者，我们更看重工具的稳定性、构建速度以及强类型约束。

1. 构建工具：Rsbuild vs Vite

维度	Vite (目前主流)	Rsbuild (本次选择)	决策理由
底层引擎	ESBuild (Dev) + Rollup (Prod)	Rspack (Rust)	Rsbuild 提供了生产环境与开发环境的一致性，且基于 Rust 的打包速度在大项目中优势明显。
配置复杂度	低，但需安装插件适配 Less/Sass	极低，开箱即用	对于不熟悉前端生态链的开发者，Rsbuild 的“零配置”体验更佳。
参考链接	Vite 官网	Rsbuild 官网	Verdict: 选择 Rsbuild，追求极致的 DX (Developer Experience)。

2. UI 组件库：Ant Design 5.0

我们没有选择目前国外大火的 shadcn/ui，而是坚守了 Ant Design。

理由: shadcn/ui 适合需要高度定制 UI 的 C 端产品；而 Ant Design 提供了极其丰富的“业务组件”（如复杂的 Table、Form），更符合 B 端后台“快速交付”的需求。

设计理念: Ant Design 的 API 设计非常像后端 SDK，参数传递清晰，文档详尽。

3. 状态管理：Zustand vs Redux

Redux: 经典的 Flux 架构，但样板代码（Action/Reducer/Type）过多，类似于写 SOAP XML。

Zustand: 本次选择。它采用了 Hook-based 的 API 设计，极简，类似于后端的 Singleton Service（单例服务）。

参考: Zustand GitHub

二、核心概念映射：用后端思维理解 React

React 的学习曲线陡峭，主要是因为其“声明式 UI”与后端的“命令式逻辑”不同。但我们可以建立映射关系：

1. 组件 (Component) = 类 (Class)

组件是 UI 的基本单元。

Props (参数) = 构造函数参数。父组件传给子组件的数据，不可变 (Immutable)。

State (状态) = 类的私有成员变量 (private field)。状态改变，组件自动重新渲染 (render)。

2. 副作用 (Side Effect) = IO 操作

在函数式编程中，任何与外部世界交互（API 请求、修改 DOM、写 LocalStorage）都叫副作用。

Hook: useEffect

心法: 把它看作是 Observer（监听器）或 Destructor（析构函数）。

useEffect(fn, []) -> Init() (只执行一次)
useEffect(fn, [id]) -> OnChange(id) (依赖变化时执行)

3. Promise = Future/Task

JS 是单线程的，所有耗时操作必须异步。

Async/Await: 现代 JS 的语法糖，让异步代码看起来像同步代码。这与 C# 的 async/await 完全一致。

三、架构演进：从“面条代码”到“配置驱动”

在本项目中，我们经历了一次关键的重构：从手动拼接 UI 进化为 配置驱动 UI。

阶段一：手动挡 (Manual Mode)

在 OrderList 页面，我们最初是这样写的：

阶段二：自动挡 (SmartTable)

我们借鉴了 ProComponents 的思想，封装了 SmartTable 组件。

核心思想: Inversion of Control (控制反转)。业务页面不再关心“怎么渲染搜索框”、“怎么发请求”，只负责提供“配置”和“接口”。

关键技术点：URL 状态同步

在 SmartTable 内部，我们集成了 react-router-dom 的 useSearchParams。

功能: 当用户搜索时，自动将参数同步到 URL (?id=123)。

价值: 刷新页面不丢失状态，方便分享链接。这是 B 端系统的高级特性。

四、总结与展望

通过本项目，我们构建了一套适合后端开发者使用的前端脚手架：

工程化: Rsbuild + TypeScript 保证了开发体验与代码质量。

架构: Layout - Page - Component - Store 分层清晰。

复用: SmartTable 解决了 80% 的 CRUD 列表页需求。

下一步建议:

深入学习 React Hooks (useMemo, useCallback) 以优化性能。

引入 TanStack Query (React Query) 来替代手写的请求状态管理，它能提供更强大的缓存和重试机制。

致谢: 感谢 Oscar Niemeyer 的建筑美学灵感，本项目命名为 niemeyer，寓意代码结构如现代建筑般优雅、简洁。

一、 技术选型：速度与秩序的平衡