React组件库实战
2024-08-14 14:22:18 0 举报AI智能生成
AntD/MUI/FluentUI源码分析
作者其他创作
大纲/内容
React + TypeScript + Vite + Vitest + StoryBook + cssinjs + mdx + codesandbox + stackblitz + 动态主题
vite
工程化
项目下载下来之后直接pnpm install，然后pnpm sk启动即可
pnpm
包管理工具packageManager
基础是styled-components
@griffel/react
style
mdx\\md\\tsx
storybook
文档
vitest+jsdom
单元测试
Eslint
Fish UI
支持TypeScript
webpack
项目下载下来之后直接npm install，然后npm start启动即可
npm
早期是less，从AntD5之后，切换成了cssinjs方案。具体选择看下面两条
@ant-design/cssinjs
antd的styled方案封装
为组件研发而生的静态站点框架
markdown
dumi
immer+lodash+crypto
devDependencies
classnames+copy-to-clipboard+dayjs+scroll-into-view-if-needed+throttle-debounce
dependencies
其它
Jest+jsdom
Prettier、Eslint
git hooks husky
定义拦截
lint-staged
文件过滤
国内用户群庞大、组件库功能非常丰富。
优势
不方便大量借鉴。
基础架构(dumi)、依赖项(如cssinjs)都是阿里系。
不适合移动端
包相对较大
特点
AntD
定义antd所需要的基础type和公共type
这个文件夹里定义color\\font\\size\\style这些ts文件，
返回MapToken，extends SeedToken、ColorPalettes、FontMapToken、SizeMapToken等
index.ts
返回ColorSuccessMapToken等
定义各种color相关的string，如colorBorder、colorWhite、colorBgMask等
color.ts
返回FontMapToken
定义各种字体相关的number类型，如fontSizeSM\\lineHeight等
font.ts
返回SizeMapToken、HeightMapToken
定义的是size相关的数字类型定义，如XS的height，XL的size是number
size.ts
返回StyleMapToken，包括lineWidthBold、borderRadiusXS、borderRadiusOuter等
style.ts
maps
只返回interface AliasToken，extends MapToken
alias.ts
只返回ComponentTokenMap，里面各个组件的style，来自组件文件夹下的style文件夹内容，如
components.ts
返回数组PresetColors、type PresetColorKey、type PresetColorType等
presetColors.ts
返回 interface SeedToken extends PresetColorType
包括colorPrimary、colorSuccess、borderRadius等
seeds.ts
interface
compact
dark
export default function derivative(token: SeedToken): MapToken {}
返回derivative函数
返回getAlphaColor与getSolidColor函数
colorAlgorithm.ts
default
genColorMapToken.ts
genCommonMapToken.ts
genControlHeight.ts
genFontMapToken.ts
genFontSizes.ts
genRadius.ts
genSizeMapToken.ts
shared
export default function genColorMapToken
返回一个对象，这个对象里都是颜色相关的样式，如colorWhite、colorWhite等
ColorMap.ts
定义默认颜色的值，如blue、colorPrimary、colorSuccess等。这里export两个变量defaultPresetColors与SeedToken
这个文件所对应的PresetColorType与SeedToken类型定义，在theme/interface/seeds.ts中
seed.ts
themes
返回genComponentStyleHook函数，这个函数非常重要，每个组件都会用到
genComponentStyleHook.ts
util
返回defaultTheme。
即theme/themes/seed.ts中的seedToken
返回DesignTokenContext对象，其默认值的token是defaultSeedToken
context.ts
getDesignToken.ts
internal.ts
useToken.ts
theme
工具函数
utils
DerivativeToken与AliasToken是一个值
每个组件基本都是一样的结构，这里我们以divider为例
组件源码
index.tsx
测试用例
__tests__
md
demo
返回Divider的token，即export interface ComponentToken
genComponentStyleHook函数非常重要，每个组件都会用到
export default 返回genComponentStyleHook函数的执行结果，在divider/index.tsx中以useStyle调用
divider
components
antd源码分析
大写字母开头的是组件，小写字母开头的是组件相关配置
mui-material/src
packages
默认
MUI源码分析
支持TypeScript、Prettier、Eslint
支持monorepo
pnpm i -g pnpm@9.6.0
2024.8.9要求pnpm9.6.0
pnpm start启动即可
cssinjs
子项目构建文档
Karma
国际知名度比较高，用户群也很多。精简
适配移动端。
包是AntD的四分之一，但是功能没有AntD多。
MUI npm近期周下载量是AntD的两倍多。
MUI
项目下载下来之后直接yarn install，然后yarn start启动即可
yarn
微软
组件较少、功能也较少
使用React Compiler
新版本代码比较新
渲染方式非传统jsx
Fluent UI
常见UI组件库技术分析
收藏
收藏
0 条评论
回复 删除
下一页
