Zarm 3.0 正式公布！

flora76321

前言
跟着前端技术的突飞猛进、react v18 的公布和本身业务的开展，基于 React 的挪动端组件库 Zarm，降级势在必行，通过团队多月研发和打磨，在 2023 年春季开始的时分，Zarm 3.0 终于要和大家见面了。


目录
一、新组件
二、体验降级
三、从能用到好用
四、主题多样化及定制才能
五、将来
六、最初
一、新组件
在新版本中，咱们减少了 10+ 全新的组件，它们是基于咱们本身的业务虚践而开发。这些组件通过谨严的推敲，确保了其通用性和扩展性，置信它们将为用户带来更好的使用体验。
Skeleton 骨架屏：在界面等候加载区域展现占位图形。
WaterMark 水印：展现页面版权一切者信息，内容泄漏后以便追溯。
Grid 宫格：在程度标的目的上把页面分隔成等宽度的区块，用于展现等宽内容或进行页面导航。
Rate 评分：对事物进行评级操作，丰硕了表单交互的方式
Image 图片：提供 5 种图片填充模式，反对懒加载、加载中/加载失败占位和回调
以及提供了 5 个罕用的 hooks ，帮忙各位开发者解决常见交互问题。
useClickAway 单击内部跟踪器
useInViewport 进入阅读器窗口
useLongPress 长按
useOrientation 屏幕标的目的
useScroll 转动
二、体验降级
在 3.0，咱们进行了一次片面的组件重构，将一切组件从类组件重写为函数式组件，这个变动将为开发者们带来更好的使用体验和更高的机能表示。
01 手势交互细节
咱们使用了use-gesture，它提供了更为灵活、牢靠的手势辨认才能，让用户能够更为天然地操作，进步用户的交互体验。
02 流利的动画
目前咱们使用了react-transition-group作为动画库，它使用了一些优化伎俩，能够在包管动画流利性的同时，最大限制地增加机能开消，为运用带来更为生动、流利的动效。
03 视觉降级
同时，咱们结合了IOS 16 组件库设计资源，对部份组件的 UI 细节进行了调剂，放弃了组件视觉的总体统一性和总体好看度，让用户能够享用到更为优秀的视觉体验。
三、从能用到好用
咱们还优化了组件的设计和 API，以更好地知足开发者们的需要。
01 指令式调用
首先，咱们对一切弹层交互组件减少了指令调用形式，这样就再也不需求添加少量的代码来完成弹层的形态办理，只需经过简略的指令式调用，就能在任何中央轻松使用弹层组件。


反对指令式调用的组件：
Modal
Picker
DatePicker

ActionSheet
Cascader
Toast
02 挂载监听节点的全局配置
其次，咱们提供了全局配置一致办理组件默许的挂载节点与转动监听节点，解决微前端挂载节点变卦的需要。


03 日期组件
此外，咱们对日期组件也进行了改进，移除了内置预设模式，调剂为更为灵敏的时间类型列进行配置，而且减少了“周”时间类型和十二小时制。


另外，还减少了对时间类型值过滤的 API。


04 片面拥抱 TypeScript
咱们将 TypeScript 运用于全部组件库和组件款式，而且将这些类型进行了导出，这象征着咱们能够为开发者提供更好的类型平安和编纂器反对，以及更易避免一些潜伏的过错，帮忙咱们更好地构建牢靠的运用顺序。
05 组件拆分和API整合
咱们把在 2.x 一些设计分歧理的部份组件做了一些调剂，为了更合乎功用含意、便于记忆、使用预期更明白。
例如：
CustomInput 和 Input 别离
ActivityIndicator 重命名 Loading
StackPicker 重命名 Cascader，而且动画和交互调剂为 Tabs + Radio
总而言之，这些变动将帮忙开发者们更为轻松地完成他们的名目需要，并带来更好的用户体验。
四、主题多样化及定制才能
01 CSS Variables 静态主题
在过来的版本中，Zarm 提供了一套默许的主题款式，开发者只能在编译时乃至是款式掩盖对默许主题进行微调，然而，关于一些需求更为静态的主题变动的运用顺序来讲，这些动态的主题款式可能无奈知足需要。当初，咱们提供了全新的静态主题功用，而且提供了几种不同的形式来静态地改动 Zarm 默许主题。
全局配置


组件内联


02 自定义内容渲染
在新版本中，除了 Checkbox/Radio 预设款式外，咱们提供了显示元素的自定义渲染函数，开发者能够按照实际的业务场景定制开发。


不只如斯，咱们一样凋谢了 Keyboard 源数据自定义的才能，这个功用十分合适那些需求特定的业务场景，好比车牌键盘等等。


五、将来
总的来讲，Zarm 3.0 带来了许多改进和新特性，使得 Zarm 变得更为易于使用和定制，后续咱们方案提供更多的组件，在未来咱们也会在 CSS in JS、headless UI 做更进一步的探究。而且在知足挪动端 Web 开发根底上，咱们也在踊跃的发现更多平台的适配问题，好比小顺序。
六、最初
关于还在使用 Zarm 2.x 或更早的版本，咱们也筹备了完美的迁徙指南[1]
最初感激社区同窗参预 Zarm 3.0 的开发：faner十一、tgioer、jiyingzhi、JunIce、nemoisme
[1]迁徙指南：http://zarm.design/#/docs/migration-v3
[2]GitHub：http://github.com/ZhongAnTech/zarm/discussions