UI库架构设计
- 分层
- rc-xxx，提供基础组件，unstyled component (headless) ，只具备功能交互，不具备UI表现
- 样式体系
- 基础组件
- 复合组件，Search：Input + Select ，IconButton：Icon + Button
- 业务组件
- 解耦
- 对于每个组件都需要定义样式、ts、类型、基础操作、工具方法
- 响应式设计
- 媒体查询 media query、ResizeObserver、grid布局
全局状态
- 全局状态，基础配置、国际化配置、主题配置，react >> Context 、useSyncExternalStore，vue >> vue-demi
- 局部状态，表单场景，受控和非受控（状态是否跟表单值双向绑定）
- 受控：<input value={v} onChange={(v)=>setV(v)}
- 非受控 defaultValue + ref
样式体系与主题设计
- Color Tokens：颜色色值系统，（antdDesign、arcoDesign (css in js方案)| mantineUI | mui |shadcn/ui）
- 样式模块化方案：
- css-in-js（弊端：运行时（运行时的内存损耗）、srr支持不好）：emotion、styled-component
- module css
- 样式优先级与覆盖：控制样式优先级
模块化
- 可复用性
- 公共方法：颜色计算函数，格式化处理，本地化，工具函数
组件开发流程
-
工程架构：monorepo，core + components + hooks +utils ...
-
TypeScript
-
流程化、规范化、自动化，
- script如何定义（CI/CD 源头）
- 规范化（eslint、stylelint、commitlint）
- 颜色值生成，自动构建，增量构建，构建缓存
-
构建打包：rollup、esbuild、swc
-
测试，单元测试，vitest，jest+react-testing-library