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

相关推荐
类人_猿10 小时前
PhotoShop批处理
ui·photoshop·批处理·photoshop批处理
PM大明同学11 小时前
Axure PR 9 中继器 02 分页提示
ui·交互·产品经理·axure
十秒耿直拆包选手11 小时前
cmake:定位Qt的ui文件
c++·qt·ui·cmake
engchina12 小时前
使用 Vite + React 19 集成 Tailwind CSS 与 shadcn/ui 组件库完整指南
css·react.js·ui·vite·tailwind·react 19·shadcn
1024小神16 小时前
ios苹果手机使用AScript应用程序实现UI自动化操作,非常简单的一种方式
运维·ui·自动化
画月的亮1 天前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Jackson@ML1 天前
React入门 – 1. 学习React的预备知识
javascript·react.js·ui
laimaxgg2 天前
Qt常用控件之按钮QPushButton
开发语言·c++·qt·ui·qt5
小王不会写code2 天前
Element UI常用组件
javascript·vue.js·ui
招风的黑耳2 天前
数据大屏炫酷UI组件库:B端科技风格PSD资源集
科技·ui