依赖于内部
@formily/reactive
提供的数据管理，可以精准收集依赖数据的组件，修改数据后，做到精准打击，更新对应的组件。类似 vue 模板
template
对
data
依赖收集的过程
支持 React、Vue
阿里团队出品，有足够的的后盾维护
官方架构图：
以 React 为例：
Modules - 数据模型。用于描述表单。
Reactive - 数据响应。绑定依赖某个数据的表单和数据。
React - 渲染胶水层。绑定数据模型和具体组件。
Ant Design - 组件库。将 Ant Design 组件注册到 formily 中。
以一个 React Demo 为例，介绍整体的执行过程。
formily 在渲染一个表单时，formily 执行过程示意图：
对应的代码：
import React from 'react'
import { createForm } from '@formily/core'
import { Field, } from '@formily/react'
import {
Form,
FormItem,
Input,
} from '@formily/antd'
const form = createForm({
validateFirst: true,
export default () => {
return (
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
<Field name="username"
title="用户名"
decorator={[FormItem]}
component={[Input]}
</Form>
下面针对执行阶段介绍下实现原理
createForm
创建一个 Form 实例，作为 ViewModel 给 UI 框架层消费。
文档、源码
class Form {
constructor () {
this.values = {}
this.fields = {}
Field 组件
将 FormItem 包裹 Input 渲染, 并传入 value 和 onChange ，使组件受控，更方便管理组件的状态。
import { Field } from '@formily/core'
import { observer } from '@formily/reactive-react'
const field = new Field();
const props = {
value: field.value,
onChange() {
field.onInput(...args)
const finallyComponent = observer(<FormItem>
<Input {...props} />
</FormItem>)
@formily/core - Field
Field 的数据模型 文档、源码
class Field {
constructor(...) {
this.makeObservable()
protected makeObservable() {
define(this, {
value: observable.computed
onInput = async (...args: any[]) => {
const values = getValuesFromEvent(args)
const value = values[0]
this.value = value
observable.computed 是通过 Proxy 代理 Field 的 value 属性。
export const computed: IComputed = createAnnotation(
({ target, key, value }) => {
const store: IValue = {}
const proxy = {}
const context = target ? target : store
function get() {
bindTargetKeyWithCurrentReaction({
target: context,
key: property,
type: 'get',
return store.value
function set(value: any) {
try {
batchStart()
setter?.call?.(context, value)
} finally {
batchEnd()
if (target) {
Object.defineProperty(target, key, {
enumerable: true,
configurable: false,
return target
} else {
return proxy
@formily/reactive-react - observer
observer 是一个高阶组件，使组件可以将数据和组件关系进行绑定。主要依赖的是两个函数 Tracker 和 useObserver。
Tracker 主要的两个函数：
绑定数据需要跟踪的组件 track;
提供更新的组件的方法_scheduler(为了兼容不同框架，实际的更新方法通过 callback 方式实现)。
export class Tracker {
private results: any
constructor(
scheduler?: (reaction: Reaction) => void,
name = 'TrackerReaction'
this.track._scheduler = (callback) => {
if (this.track._boundary === 0) this.dispose()
if (isFn(callback)) scheduler(callback)
track: Reaction = (tracker: Reaction) => {
if (ReactionStack.indexOf(this.track) === -1) {
try {
ReactionStack.push(this.track)
this.results = tracker()
} finally {
ReactionStack.pop()
return this.results
useObserver 使组件可被追踪
export const useObserver = (
view: T,
options?: IObserverOptions
) => {
const forceUpdate = useForceUpdate()
const trackerRef = React.useRef<Tracker>(null)
if (!trackerRef.current) {
trackerRef.current = new Tracker(() => {
if (typeof options?.scheduler === 'function') {
options.scheduler(forceUpdate)
} else {
forceUpdate()
}, options?.displayName)
return trackerRef.current.track(view)
const component = (props) => {
console.log(`组件更新：${props.name}`);
const components = [];
const values = {
name: "初始数据",
const dataWithComponentMap = new WeakMap();
const proxyValues = new Proxy(values, {
get(target, key) {
dataWithComponentMap.set(target, components[components.length - 1]);
return target[key];
set(target, key, value) {
target[key] = value;
const component = dataWithComponentMap.get(target);
component(target);
return true;
const Wrapper = ({ component }) => {
return () => {
components.push(component);
component(proxyValues);
const newComponent = Wrapper({
component,
newComponent()
proxyValues.name = "更新数据";
React
Provider
官方介绍。在进行第三方插件开发时，可以利用它很方便实现内部拓展。
三方库 Field
provider.js
import React from 'react';
export const ComponentProvider = React.createContext();
import React, { useContext } from 'react';
import { ComponentProvider } from './provider';
const ComponentProvider = React.createContext();
const Field
= ({ type }) => {
const components = useContext(ComponentProvider)
const component = components?.[type] || <div>内部组件</div>
return component
import React, { useContext } from 'react';
import Field, { ComponentProvider } from 'Field';
export default () => {
return <ComponentProvider.Provider value={{
customize: <div>自定义组件</div>
<Field type="customize" />
</ComponentProvider.Provider>
Javascript
Proxy
轻松实现数据的依赖收集。MDN
weekMap
WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意。它的键被弱保持，也就是说，当其键所指对象没有其他地方引用的时候，它会被GC回收掉。WeakMap提供的接口与Map相同。
let obj = {}
const normalMap = new Map();
const weakMap = new WeakMap();
normalMap.set(obj, 'normalMap存在')
weakMap.set(obj, 'weakMap存在')
console.log(normalMap.get(obj));
console.log(weakMap.get(obj));
obj = null
console.log(normalMap.size);
console.log(weakMap.size);
复制代码
