设计思想
-
分层
- rc-xxx，提供基础组件，unstyled component，只具备功能交互而不具备UI表现的
- 样式体系：theming
- 基础组件
- 复合组件，search，input+select，IconButtion
- 业务组件
-
解耦
- 对于每个组件都需要定义样式，ts类型，基础操作，工具方法
-
响应式设计
- 媒体查询 media query Grid
状态管理
- 全局状态，基础配置，国际化组件，主题配置，react-》context,vue->demi
- 局部状态,表单场景,受控和非受控,状态是否跟表单值双向奔赴
样式体系
-
Color Token:颜色色值系统
四种不同的颜色体系
antd|mantineUI|mui|shadcn
-
样式模块化方案:
css-in-js(弊端:运行时性能损耗,ssr支持),
module css方案
-
样式优先级与覆盖:控制样式优先级
模块化
- 可复用性,对于props,events的设计非常重要,这就素为什么input和文本域要value和ocChange成对
- 公共方法和颜色
开发流程
本地开发:使用现有的组件库二次开发
组件库开发:
- 工程架构
-
ts
-
构建打包:rollup,esbuild,swc
-
测试,单元测试,vitest,jest+react-testing-libray
-
流程化,规范化,自动化,script如何定义
根据上面的一些想法，设计了一个自己的组件库，目前正在根据这些想法完善
Fei组件库
还有很多没有做
