Formily(原名 UForm)是阿里巴巴开源的一套面向复杂场景的、跨端、高性能表单解决方案。
在企业级中后台开发中,表单往往是最复杂的部分(如动态联动、大数据量渲染、多端适配等)。Formily 的出现正是为了解决这些痛点。以下是它的核心介绍:
1. 核心设计理念
Formily 采用的是 MVVM 设计模式,它将表单的“状态(Model)”、“协议(Schema)”和“视图(View)”彻底解耦:
字段级分布式渲染:传统的表单框架(如 Ant Design 的旧版 Form)在字段变化时往往会触发整个表单的重绘。Formily 实现了字段级的独立管理,即使表单有成百上千个字段,性能依然丝滑。
协议驱动(Schema Driven):Formily 深度集成了 JSON Schema。这意味着你可以通过一份 JSON 配置直接生成整个表单,非常适合低代码(Low Code)平台和后端动态控制表单。
2. 核心架构(分层设计)
Formily 2.x 的架构非常清晰,分为以下几层:
@formily/core (内核层):纯逻辑层,不依赖任何 UI 框架。负责管理表单生命周期、校验逻辑、状态转换等。
@formily/reactive (响应式层):Formily 自研的响应式状态管理方案(类似 MobX),是高性能渲染的基石。
@formily/react / @formily/vue (桥接层):将内核逻辑与 React 或 Vue 框架结合的工具。
@formily/antd / @formily/next / @formily/tdesign (组件库):针对不同 UI 体系(Ant Design, Alibaba Fusion, TDesign)封装的成品组件。
3. 主要特性
极高性能:在大表单场景下优势明显,仅局部更新。
强大的联动能力:支持极其复杂的联动逻辑(比如:字段 A 决定字段 B 是否显示,字段 B 的值又影响字段 C 的校验规则)。它提供了一套优雅的“路径系统”来定位和操作字段。
跨端/跨框架支持:支持 React、Vue 2、Vue 3,甚至可以在小程序和 React Native 中使用。
可视化搭建支持:Formily 拥有配套的可视化表单设计器 Designable,可以实现“拖拽即所得”。
4. 为什么选择 Formily?
5. 链接
总的来说,Formily 不仅仅是一个组件库,它是一整套表单领域模型。虽然它的学习曲线相对较陡,但一旦掌握,能极大地提升复杂中后台业务的开发效率。