formilyjs 底层原理
2021-08-07 14:38:40
FormilyJS的底层原理基于响应式编程与分层架构设计，通过数据代理、协议扩展和性能优化机制实现高性能跨框架表单开发。其核心实现可分为以下四个方面：
一、响应式状态管理FormilyJS的响应式核心依赖@formily/reactive模块，该模块借鉴Vue3的Proxy特性实现数据代理。每个状态对象被Proxy化后，组件的渲染函数会被自动收集到该状态的「依赖筐」中。当状态变更时，依赖筐中的所有组件渲染函数会被重新执行，仅更新实际使用到变更数据的组件，避免整树重绘。例如，通过model方法封装的业务模型（如数据获取、转换逻辑）无需手动管理响应式声明，开发者可像编写普通JS类一样定义业务逻辑，数据变更时自动触发依赖组件更新。
二、分层架构设计内核与协议层
内核：提供表单领域模型系统（如Form、Field类），记录表单数据状态和生命周期钩子，与框架无关。
协议层：基于JSON Schema扩展的表单协议，通过x-*格式（如x-component指定组件类型、x-component-props传递属性）实现UI与数据协议的解耦，支持动态配置化表单生成。
UI桥接层作为胶水层，将内核与React/Vue等框架绑定。例如，通过observer高阶组件实现组件与数据模型的自动关联，确保数据变更时组件正确更新。
组件扩展层支持Ant Design、Element等组件库的注册与扩展，通过协议属性（如x-component）实现自定义组件集成，同时支持虚节点（Void）声明非数据节点（如UI容器），不占用实际数据结构。
- 精准依赖收集类似Vue的模板依赖追踪，仅更新使用到变更数据的组件，避免不必要的渲染。
- O(1)时间复杂度无论字段数量多少，高频输入场景下保持恒定性能。通过依赖筐的直接调用替代脏检查，确保数据变更时仅触发必要更新。
通过JSON Schema扩展标准属性，实现UI与逻辑的解耦。例如，用x-component指定组件类型，x-component-props传递组件属性，支持虚节点声明非数据节点。这种设计使得表单配置可完全通过JSON驱动，降低开发复杂度。
FormilyJS通过上述设计，实现了业务逻辑与渲染逻辑的清晰分离，同时支持跨框架使用，成为高性能表单开发的理想选择。
热门标签
