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