onFieldValueChange effect 的原理

[javahuang]

问题

下面这段代码，当 aa 字段的值变化的时候，会触发 onFieldValueChange effect 的 callback，在该 callback 里面继续修改 bb 字段的值会触发 bb 字段 onFieldValueChange effect 的 callback， 但是修改 aa 不会再次触发 effect 造成死循环，这个原理是啥呢？

createForm({
        effects: (f) => {
          onFieldValueChange("aa", (field, form) => {
            form.query("bb").take().setState(state => state.value = Math.random())
            field.setState((state) => (state.value = Math.random()));
          });

          onFieldValueChange("bb", (field) => {
            console.log(field.value);
          });
        },
      }),

onFieldValueChange effect 原理

onFieldValueChange effect 的本质是使用了观察者模式，注册一个 LifeCycle 生命周期对象来订阅 onFieldValueChange 类型的事件

formily/packages/core/src/shared/effectbox.ts

Lines 14 to 21 in 2501e72

	if (GlobalState.effectStart) {
	GlobalState.lifecycles.push(
	new LifeCycle(type, (payload, ctx) => {
	if (isFn(callback)) {
	callback(payload, ctx, ...GlobalState.context)(...args)
	}
	})
	)

field 的 value 是 observable 的，当 field 的 value 变化的时候，会触发 该 value 绑定的 reaction，在该 reaction 里面会发布通知执行注册的回调。

formily/packages/core/src/models/Field.ts

Lines 224 to 229 in 2501e72

	reaction(
	() => this.value,
	() => {
	this.form.notify(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, this)
	}
	),

为啥不会循环触发回调

上面简单介绍了下 onFieldValueChange effect 的原理，下面说说为啥不会循环触发 effect 的 callback。

formily/packages/core/src/effects/onFieldEffects.ts

Lines 17 to 30 in 2501e72

	return createEffectHook(
	type,
	(field: Result, form: Form) => (
	pattern: FormPathPattern,
	callback: (field: Result, form: Form) => void
	) => {
	if (FormPath.parse(pattern).matchAliasGroup(field.address, field.path)) {
	batch(() => {
	callback(field, form)
	})
	}
	}
	)
	}

由于整个执行逻辑是经过 batch 包装的，在 value 的 effect 还没结束之前又去改变自身，仍然是在同一个 batch 里面。

batch: 接收一个操作函数，并立即执行，执行过程以批量模式执行，也就是每次操作函数执行一次，Reaction 只会响应一次

所以， effect 内部修改 aa 字段本身不会再次触发 effect，修改 bb 字段会触发它对应的 effect。