UI库架构设计

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