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