
10.8 组件库与设计系统
设计系统的核心是「用 token 把『设计决策』抽成变量」——原始层(primitive)→ 语义层(semantic)→ 组件层(component) 三层 token 是一切的地基;而组件库的工程重点是「保留源码形态的构建产物(不打包依赖)+ 类型 + 文档 + 视觉回归 + 版本管理」。

设计系统的核心是「用 token 把『设计决策』抽成变量」——原始层(primitive)→ 语义层(semantic)→ 组件层(component) 三层 token 是一切的地基;而组件库的工程重点是「保留源码形态的构建产物(不打包依赖)+ 类型 + 文档 + 视觉回归 + 版本管理」。

国际化(i18n)的核心是「文案与代码分离 + 运行时切换」(用 react-i18next / next-intl,配合 Intl 做日期数字格式化);主题的核心是「CSS 变量 + data-theme 属性」(零运行时、无闪烁)。

压缩、裁剪、加水印、抠图、拼接都在本地完成。不限张数、不限次数,图片不会传到服务器。

目录结构有「按类型划分(type-first)」与「按功能划分(feature-first)」两派——中大型项目推荐 feature-first(改需求只动一个目录);组件则按「基础 → 组合 → 业务 → 页面」四层组织,公共组件的沉淀要有标准。

规范工具链的分工是「Prettier 管格式、ESLint 管正确性与坏味道、TypeScript 管类型」——其中 eslint-plugin-react-hooks 的两条规则最关键(rules-of-hooks 是 error、exhaustive-deps 至少 warn)。

React 测试的核心思想是「像用户一样测试」——用 Testing Library 按「角色/文本」查元素、用 userEvent 模拟真实交互、断言「用户能看到什么」,而不是断言「组件内部的实现细节」。

主流方案有四种——CSS Modules(无运行时、作用域隔离)、Tailwind(原子化、无运行时)、CSS-in-JS(有运行时开销)、普通 CSS/Sass(需自己管命名);

React + TS 的核心是「把 props、事件、children、ref 的类型写准」——基础组件要 extends React.XxxHTMLAttributes

SPA 项目用 Vite(开发极快、原生 ESM、生态成熟),需要 SEO/SSR/全栈能力用 Next.js,CRA 已停止维护不要再用;构建阶段关心的是「依赖预构建、HMR、产物优化、环境变量」。

部署形态决定了「你的代码能做什么」——静态托管没有服务端、Serverless 有冷启动与执行时间限制、容器要自己管伸缩、Edge 有 API 白名单;而工程上的关键是「产物形态(standalone)、环境变量的构建期/运行期区分、健康检查与优雅关闭、以及可回滚」。

Server Actions 的本质是「一个自动生成的 POST 端点」——所以它最容易被误解的地方是「它没有任何隐式安全」:必须自己鉴权 + 自己校验参数 + 自己防 CSRF;而它的真正价值是「用「函数调用」的写法拿到『渐进增强的表单提交 + 自动重新验证 + 乐观更新』」。
最新评论
读过书不知道欧·亨利的人少。教科书上选文有
这小生活不错呀
不错,必须顶一下!
看着你还在坚持,很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错!!!!
简洁实用,好文章!