字节系 Semi Design 源码初析

本文大约 600 字，看完本文大概需要 5 分钟，重点介绍了官方源码的目录结构和阅读方式，以达到自我阅读源码的能力，如有错误，请指正。

如何看源码

1. clone 代码

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

2. 文件核心目录

- content -- semi ui 官网文案相关
- packages -- 组件核心功能
    - 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 的原理

• Foundation functions部分，负责交互行为逻辑，包括各种计算、判断分支等逻辑的行为组合。其中需要dom操作的部分会委派给Adapter functions
• Adapter functions部分，负责所有跟 DOM 操作/更新相关的逻辑，通常会使用框架api进行setState、getState、addListener、removeListener等操作

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

在看功能组件前，需要先学习 BaseComponent 组件， semi-ui 里面大部分功能组件继承这个 BaseComponent 组件（此处不是 HOC,跟我想的不一样 ），起到了 F/S 一个抽离公共函数（props、state）和数据交互中转站(context)的作用

packages\semi-ui_base\baseComponent.tsx

packages/semi-foundation/base/foundation.ts

5. 找一个组件深入学习

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

1. button、avatar、card
2. collapse、dropdown
3. 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 代码提示比较弱,好多 any
3. 组件基本上都是 Class 组件，而不是 Function 组件

如何贡献源码

官方贡献文档

参考

semi ui

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

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

Build component driven UIs faster