开源的组件库，本质上差别不是太大，不过是每家的设计思维会不同；
根据自己的项目需求，选择合适组件库，吸收其中思想，让设计更具有合理性；
统一性，使工作效率更快提升。多看，多沉淀解决方案，提升设计思维，掌握其中核心思想，传递更好的产品给用户。

component-list
image.png

dumi-docs
image.png
一些中台的痛点，组件库并没有给出有效的解决方案，比如

  1. 大数据表格 Table
  2. 长列表 List
  3. 高性能表单 Form

image.png
基础组件 👉🏻 组件 👉🏻 业务代码段 👉🏻 页面级组件

基于 Ant Design，带有业务属性的UI资产

  • 组件：就是常用的React 组件，比方说按钮，日期组件
  • 区块：是模板的一部分，一个可快速使用和修改的代码片段，介于组件和模板之间的中间资产
  • 模版：是由组件和区块拼装组成的页面级别代码片段，例如，欢迎页

F/A分层设计，解决跨前端框架UI组件的逻辑复用问题
沉淀一个前端的基本策略：要想实现逻辑复用，先分层
UI 资产去覆盖 80% 的业务场景，实现跨团队，跨业务线的 UI 资产共建
组件研发流程
需求池：需求沟通和组件评估来判断
企业级产品将近1000多个核心页面进行了归类整理
开发新组件 OR 对已有组件进行升级
哪些页面应该沉淀为模板，
哪些应该抽出成为组件。通过这样的过程我们确保开发的UI资产来自于业务，服务于业务
50+ 企业级产品
1000+页面分类整理
通用业务组件
常用区块代码
业务模板

https://www.aisoutu.com/a/1664345
https://www.yuque.com/ant-design/course/lsoh4c
架构师的跨越，先有一套自己的思维模型，一套基础的万金油架构设计方法论
软件设计与实现包含以下模块：
1、功能实现
2、代码层次与架构
3、存储部署与网络通讯
4、 存储层的数据结构
5、运行架构性能
架构设计准则，往往也是从逻辑架构、数据架构、开发架构、运行架构和物理架构5个不同角度出发，这就是架构设计“5视图法”
https://github.com/react-monaco-editor/react-monaco-editor
antd/index.js，对 antd4x 重新打 umd 包，暴露 window.antd4
antd/index.css，对所有样式加前缀确保共存时不会有冲突
antd4.x 底层依赖来自于独立的 rc 组件库， antd 基于rc组件库上层样式与功能的封装
Hooks 简化 HOCTree、Select、TreeSelect虚拟滚动，Table需要自己实现虚拟滚动
Form细粒度的渲染控制，form参考 final form；默认自带高性能，同时兼顾易用性
v4，v3表单校验就是异步的，debounce需要自己来实现
没有渲染的行列字段，也就不会有 DOM节点
items 代替 children jsx 语法糖，antd@4.23.x
Tabs的 items，Menu的 menus
超长单元格在滚动到之前不知道它的宽度，因而滚动的时候会突然遇到跳跃的情况
虚拟滚动对于跨行截断单元格的无障碍支持也会有问题
Table，context 导致的 rerender、Resizable 导致的 rerender 等

IE 11 前的兼容性惨不忍睹，即便引入了 polyfill
@ant-design/pro-layout@6.37.0 之后使用 antd@4.20.0 新增 Menu api items 替换原本 jsx
如果遇到问题，线板 peerDeps 更新至 >= antd@4.20.0
redux，single source of truth 唯一的标准数据，单一数据源
不要自动替开发者触发 onChange，它只应该如实反应交互的数据变化
针对自己的场景做到极致的优化
设计工程化：打通设计、研发、消费链路

产研协同模式
从单点效能、设计前端协作、全流程协同三个维度
对Web开发来说，端对端交付大于一切
https://www.uisdc.com/seeconf-2022
react sketch app，让设计面向开发
react to sketch50+
https://github.com/airbnb/react-sketchapp
https://www.zhihu.com/question/59069953
antd命名规范
https://github.com/ant-design/ant-design/wiki/API-Naming-rules
Select AutoComplete/Cascader/TreeSelect
https://kitchen.alipay.com/
有限状态机
rc 组件作为底层组件，更多的是单元测试
babel 底层的机制
尽可能对这些变化保持敏感，并且第一时间去寻找线索
开发出 PD产品、设计都能用的一站式 lowcode 平台
专属的协作平台
业务使用语雀维护产品文档
设计师使用Sketch完成设计
前端使用代码仓库
这些平台在各自的领域，针对各自领域提供了高效的工具和能力，做到了足够的高效。
但是这些高效的工具和能力针对另外一个领域可能就是巨大的阻碍
一站式的解决方案

  • 产品：产品同学可以在语雀上上快速完成表格的初步绘制，例如我们会提供一键复制表格的功能，让 PD 快速完成表格的初步设计；
  • 设计：在产品完成表格字段的确认后，设计师可以在 Kitchen 中一键同步ADS 上的项目，并基于此配置项完成设计侧的加工。并基于 C2D 置入到自己的设计稿中；
  • 开发：当设计师完成表格的设计后，便可将配置导出给前端同学。此时前端同学只需将此表格快速关联到后端接口，并绑定数据源，我们就会将表格的前端代码自动生成出来。然后前端同学可以选择采用自己习惯的方式，将代码置入到研发的项目中

PSD 生成代码
https://h5.bce.baidu.com/
PO是产品运营的缩写，全称是product operation
双向编辑
从 json 导入为 sketch 这个事情
理想中的设计工具：
1.（图形界面和代码双向编译）
2.跨文件共享样式
3.json为组件传参
4.Ai设计辅助：匹配设计模式和素材收集
5.弹性栅格
6.简单的版本控制
7.页面路由描述
8.为组件添加一些条件控制语句

antd5x design token新特性

antd5文档 https://next.ant.design/index-cn
https://www.yuque.com/yuqueyonghuipdpjm/yefogc/wl91zy
antd5x开发计划 https://github.com/ant-design/ant-design/issues/33862

  1. design token重构 less
    1. css in js，emotion.js https://github.com/emotion-js/emotion
    2. 动态主题
    3. DesignToken 支持所有自定义主题
    4. CssInJs 支持一个组件的多个版本共存
  2. 支持 react18
  3. 不支持 IE
  4. Dayjs 替换 momentjs
  5. API升级

antd5新增组件

  • Tour 漫游式引导
  • QrCode 二维码
  • WaterMark 水印
  • FloatButton 悬浮按钮
  • CSS :where() 选择器 仅支持 Chrome 88 以上

API升级

  1. Modal，Drawer，用 open代替 visible
    1. 弹层类组件 open 与 visible 统一至 open 以符合 HTML5规范
  2. 结构语法糖使用数据驱动代替，以为性能优化做准备，例如
    1. Select.options
    2. Radio.Group.options
    3. Collapse.options
  3. Menu组件，Tab组件，用 items代替 Menu.Item，和 Tab.Panel
  4. items 代替 Item children
  5. dropdownClassName 与 popupClassName 统一至 popupClassName 以更符合语义

antd4x新特性

https://ant-design.antgroup.com/docs/react/migration-v4-cn

  1. antd@4.0 之后不再支持 React 15 和 IE9/10
  2. theme主题
    1. 紧凑主题
    2. 暗色主题
  3. 新增组件
    1. Icon
    2. Space
  4. API升级
    1. Form
    2. ConfigProvider代替 LocalProvider

新增组件和 API升级

  1. Space 间距
  2. Icon组件，需要单独引入
  3. Form组件废弃了 Form.create()()
    1. initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新
    2. 不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值
  4. Form 的dependencies 表单关联字段：
    1. 如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验
    2. shouldUpdate 修改 Form.Item 的更新逻辑
    3. <Form.Item shouldUpdate>

antd4.x 废弃组件

  1. LocalProvider 国际化，用 ConfigProvider
  2. Mention 提及，用 Mentions

Icon图标
画廊 Gallery
Upload多图片上传
富文本编辑器
消息中心
动态输入框

Antd 中国 https://ant-design.antgroup.com/index-cn
Antd Gitee https://ant-design.gitee.io/index-cn
atnd文档 https://www.yuque.com/ant-design/course
antd less变量

  1. @import '~antd/lib/style/themes/default.less';

antd3x新特性

  1. antd@2.0 之后不再支持 IE8；
  2. antd@4.0 之后不再支持 React 15 和 IE9/10
  3. antd.js 和 antd.min.js 依赖 react/react-dom/moment，请确保提前引入这些文件
  4. antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，根据需求进行相应调整