Semi Design 源码初析 - 掘金

如何看源码

1. clone 代码

git@github.com:DouyinFE/semi-design.git

2. 文件核心目录

- content -- semi ui 官网文案相关
    - semi-animation -- @douyinfe/semi-ui中所有组件的过渡动画效果都是基于这个动画库实现
    - semi-animation-styled -- 动画类
    - semi-animation-react -- 动画组件
    - semi-foundation -- 核心功能 F/A 架构的 F
    - semi-ui -- 核心功能  F/A 架构的 S
    - semi-icons -- 图标组件
    - semi-scss-compile -- scss 相关
    - semi-webpack -- 自定义主题和替换 css 前缀
    - semi-illustrations -- ai 矢量组件
- plugins -- gatsby 插件
- src gatsby 官网相关
- package.json

3. 阅读 Semi Design - UI组件库如何分层设计，使其具备适配多种mvvm框架能力，掌握 F / A 模式的优缺点和如何通信，如何跨 Vue、React 的原理

4. 看 packages 目录下的 semi-ui 和 semi-foundation 目录中的组件

在看功能组件前，需要先学习 BaseComponent 组件， semi-ui 里面大部分功能组件继承这个 BaseComponent 组件（此处不是 HOC,跟我想的不一样 ），起到了 F/S 一个交流的中转站作用

packages\semi-ui_base\baseComponent.tsx

5. 找一个组件深入学习

部分组件源码从简单到难的观看顺序

1. _base
2. button、avatar、card
3. collapse、dropdown
4. input、form

6. storybook ui 组件相关

Build component driven UIs faster

yarn 
yarn start

打开浏览器 http://localhost:6006/ 访问即可

7. gatsby 部署官网相关

Gatsby 是一个基于 React 的免费、开源框架，用于帮助 开发者构建运行速度极快的 网站 和 应用程序

yarn develop

个人观点

亮点

1. Semi 是基于 Sass + CSS Vars 的，动态主题切换比较好做
2. 文档的 change Log 文档对比工具好评
3. 代码没有像 antd 一样二次封装 rc 组件包，降低学习成本，对开发友好
4. F/A 架构很新颖，具体实现，让人眼前一亮

劣势

1. 目前生态不行，生产谨慎使用
2. ts 代码提示比较弱
3. 组件基本上都是 Class 组件，而不是 Function 组件

如何贡献源码

官方贡献文档

参考

semi ui

Semi Design - UI组件库如何分层设计，使其具备适配多种mvvm框架能力

Gatsby 是一个基于 React 的免费、开源框架，用于帮助 开发者构建运行速度极快的 网站 和 应用程序

Build component driven UIs faster