@formily/reactive 核心概念深入解析：Observable、Reaction、Computed 与 Batch 响应式编程模型

前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载导读本文基于 formily 仓库中 formily/reactive 核心概念文档 编写系统讲解该响应式编程模型最核心的四个概念Observable可订阅对象、Reaction订阅者/依赖追踪、Computed可缓存计算结果的 Reaction与Batch更新批处理。formily/reactive是 formily 表单体系的状态管理基石其上层包如formily/core、formily/react、formily/vue的字段联动、校验、值管理全部建立在这套响应式内核之上。读完本文你将掌握如何创建 observable 对象、如何订阅并追踪依赖、如何用 computed 缓存派生数据、以及如何用 batch/action 合并更新从而避免重复渲染。Observable可订阅对象observable 是响应式编程模型中最重要的一块。一个 observable 对象字面意思是可订阅对象的核心行为是我们在每次操作该对象的属性数据的过程中会自动通知订阅者。formily/reactive创建 observable 对象主要通过ES Proxy来实现它可以做到完美劫持数据操作。创建 Observable 的 API 家族在formily/reactive中主要使用以下 API 来创建 observable 对象observable函数创建深度 observable 对象observable.deep函数创建深劫持 observable 对象observable.shallow函数创建浅劫持 observable 对象observable.computed函数创建缓存计算器observable.box函数创建带 get/set 方法的 observable 对象observable.ref函数创建引用级 observable 对象define函数定义 observable 领域模型可以组合observable函数与其静态属性比如observable.computed函数完成领域模型的定义model函数定义自动 observable 领域模型它会将 getter/setter 属性包装为 computed 计算属性将函数包装为 action将其他数据属性用 observable 包装注意这里是深劫持在 observable.ts 的源码中可以看到这些静态属性的挂载方式export function observableT extends object(target: T): T { return createObservable(null, null, target) } observable.box annotations.box observable.ref annotations.ref observable.deep annotations.observable observable.shallow annotations.shallow observable.computed annotations.computed observable[MakeObModelSymbol] annotations.observabledefine 与 model领域模型的定义define允许你精确地为对象的每个属性指定注解annotation例如某个属性用observable.computed声明为计算属性、某个方法用action声明为动作model则是一条快捷路径它会遍历对象属性并自动推导存在 getter 的属性 →observable.computed函数属性 →action其余数据属性 →observable深劫持这一推导逻辑见 model.tsexport function modelTarget extends object any(target: Target): Target { const annotations Object.keys(target || {}).reduce((buf, key) { const descriptor Object.getOwnPropertyDescriptor(target, key) if (descriptor descriptor.get) { buf[key] observable.computed } else if (isFn(target[key])) { buf[key] action } else { buf[key] observable } return buf }, {}) return define(target, annotations) }而define本身model.ts会为对象标记ObModelSymbol、构建数据树并逐个应用注解。这种注解驱动的设计让领域模型既可以用model一键自动化也可以用define精确控制每一个属性的响应式语义。box 的实现细节observable.box创建一个带get()/set()方法的包装对象。从 box.ts 的源码可以看到get中调用bindTargetKeyWithCurrentReaction完成依赖收集set中在值真正发生变化时调用runReactionsFromTargetKey触发依赖派发function get() { bindTargetKeyWithCurrentReaction({ target: store, key, type: get }) return store.value } function set(value: any) { const oldValue store.value store.value value if (oldValue ! value) { runReactionsFromTargetKey({ target: store, key, type: set, oldValue, value }) } }注意set中oldValue ! value的相等性判断——这意味着重复赋相同值时不会触发任何反应这也是响应式性能优化的一个基础细节。Reaction可订阅对象的订阅者reaction 在响应式编程模型中相当于可订阅对象的订阅者。它接收一个tracker 函数这个函数在执行的时候如果函数内部对 observable 对象中的某个属性进行了读操作依赖收集当前 reaction 就会与该属性进行绑定依赖追踪直到该属性在其他地方发生了写操作就会触发 tracker 函数重复执行。从订阅到派发订阅其实是一个封闭的循环状态机每次 tracker 函数执行时都会重新收集依赖依赖变化时又会重新触发 tracker 执行。因此如果一旦不想再订阅 reaction 了一定要手动 dispose否则会内存泄漏——这是使用formily/reactive时必须养成的习惯。创建 Reaction 的 API在formily/reactive中主要使用以下几个 API 来创建 reactionautorun创建一个自动执行的响应器reaction创建一个可以实现脏检查的响应器Tracker创建一个依赖追踪器需要用户手动执行追踪从 autorun.ts 的源码可以看到autorun创建了一个闭包形式的 reaction 并立即执行一次reaction()返回一个 dispose 函数用于解除绑定与清理 effectsexport const autorun (tracker: Reaction, name AutoRun) { const reaction: Reaction () { if (!isFn(tracker)) return if (reaction._boundary 0) return if (ReactionStack.indexOf(reaction) -1) { releaseBindingReactions(reaction) try { batchStart() ReactionStack.push(reaction) tracker() } finally { ReactionStack.pop() reaction._boundary batchEnd() reaction._boundary 0 reaction._memos.cursor 0 reaction._effects.cursor 0 } } } // ... reaction() return () { disposeBindingReactions(reaction) disposeEffects(reaction) cleanRefs() } }reaction带脏检查的响应器与autorun不同reactionautorun.ts接受一个 tracker 与一个 subscriber并通过equals比较新旧值来实现脏检查——只有 tracker 的返回值真正发生变化时subscriber 才会被触发默认比较方式是!也可通过options.equals自定义。它还支持fireImmediately选项决定是否在创建时立即触发一次 subscriberconst dirtyCheck () { if (isFn(realOptions.equals)) return !realOptions.equals(value.oldValue, value.currentValue) return value.oldValue ! value.currentValue }autorun.memo 与 autorun.effect在 autorun 函数体内还可以使用两个进阶能力autorun.tsautorun.memo(callback, dependencies)按依赖数组缓存计算结果依赖未变时直接返回缓存值autorun.effect(callback, dependencies)按依赖数组异步执行副作用内部通过Promise.resolve(0).then(...)延后执行支持返回 dispose 函数进行清理。这两个 API 都必须且只能在 autorun 函数体内部调用否则会抛出错误。Tracker手动依赖追踪Tracker是一个类需要用户手动调用track(tracker)来执行追踪tracker.ts。它通过构造时传入的scheduler调度重跑且当其_boundary 0时执行dispose()。这在高阶场景如 React 的useObserver这类渲染绑定场景中非常有用。Computed可以缓存计算结果的 Reactioncomputed 在响应式编程模型中也是比较重要的概念一句话概括computed 是一个可以缓存计算结果的 Reaction。它的缓存策略是只要 computed 函数内部所依赖的 observable 数据发生变化函数才会重新执行计算否则永远读取缓存结果。这里要求 computed 函数必须是纯函数——内部依赖的数据要么是 observable 数据要么是外部常量数据如果是外部变量数据非 observable那么外部变量发生变化时 computed 是不会重新执行计算的。源码级缓存机制从 computed.ts 的源码可以看到computed 内部维护了一个带_dirty标记的ComputedReaction依赖变化时reaction._scheduler将_dirty置为true并触发对该属性有依赖的其他 reaction读取时若reaction._dirty为true才真正重算reaction()否则直接返回store.value缓存值function get() { if (hasRunningReaction()) { bindComputedReactions(reaction) } if (!isUntracking()) { if (reaction._dirty) { reaction() reaction._dirty false } } else { compute() } bindTargetKeyWithCurrentReaction({ target: context, key: property, type: get }) return store.value }_dirty这个惰性求值标记正是缓存策略的实现本质重算永远是被依赖变化标记、被下一次读取触发的两次重算之间读取到的都是同一份缓存结果。computed 还支持传入{ get, set }形式其set内部会用batchStart/batchEnd包裹。Batch将多次更新合并为一次派发前面讲到formily/reactive是基于 Proxy 劫持实现的响应式编程模型所以任何一个原子操作都会触发 Reaction 执行这样明显会浪费计算资源。例如一个函数内部对多个 observable 属性进行操作import { observable, autorun } from formily/reactive const obs observable({}) const handler () { obs.aa 123 obs.bb 321 } autorun(() { console.log(obs.aa, obs.bb) }) handler()这样会执行3 次打印autorun 默认执行一次加上obs.aa赋值执行一次、obs.bb赋值执行一次。如果原子操作更多执行次数会更多所以推荐使用batch 模式将更新进行合并import { observable, autorun, batch } from formily/reactive const obs observable({}) const handler () { obs.aa 123 obs.bb 321 } autorun(() { console.log(obs.aa, obs.bb) }) batch(() { handler() })当然也可以使用action进行高阶包装import { observable, autorun, action } from formily/reactive const obs observable({}) const handler action.bound(() { obs.aa 123 obs.bb 321 }) autorun(() { console.log(obs.aa, obs.bb) }) handler()最终执行次数就变成2 次了即便 handler 内部的操作再多也仍然是 2 次。batch 与 action 的底层实现batch本身是通过createBoundaryAnnotation(batchStart, batchEnd)创建的边界注解batch.ts并额外提供两个能力batch.scope创建独立作用域的批处理边界batch.endpoint(callback)在批处理计数BatchCount归零时执行回调若当前不在批处理中则立即执行。action的实现则更有意思action.ts——它不只是批处理还在边界内额外调用了untrackStart/untrackEnd也就是说action 在执行期间既合并更新又暂时关闭依赖收集export const action: IAction createBoundaryAnnotation( () { batchStart() untrackStart() }, () { untrackEnd() batchEnd() } )同样action.scope也提供作用域版本。正因为 action 同时具备 batch 与 untrack 双重语义model才会把领域模型中的函数属性自动包装为 action——这保证了业务方法内部无论写多少次属性都只触发一次派生计算与视图更新。总结formily/reactive的核心概念可以概括为一套闭环Observable用 Proxy 劫持数据读写提供observable及其deep/shallow/box/ref/computed静态族系以及define/model领域模型定义能力Reaction通过读操作收集依赖、写操作派发订阅autorun/reaction/Tracker分别满足自动执行、脏检查与手动追踪的需求注意手动 dispose 避免内存泄漏Computed是基于_dirty惰性标记的缓存型 Reaction纯函数依赖是缓存正确性的前提Batch/action通过批处理边界将多次原子更新合并为一次派发action 还额外关闭依赖收集避免不必要的重复计算。这套内核向上支撑了整个 formily 的字段模型与联动引擎理解这四个概念是深入阅读 formily/reactive 全部 API 文档、进而读懂 formily/core 与 formily/react 的前提。赞分享前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载相关推荐Formily 核心架构深度解析基于 formily/reactive 领域模型的响应式表单内核Formily 核心架构深度解析基于 formily/reactive 领域模型的响应式表单内核 导读 本文围绕 packages/core/docs/gu前端UI组件3 分钟搞定华硕笔记本风扇失控G-Helper 零门槛校准风扇控制曲线3 分钟搞定华硕笔记本风扇失控G Helper 零门槛校准风扇控制曲线 温度只有 39°C风扇却转得像要起飞或者游戏里 GPU 干到 90°C风扇纹丝不桌面应用系统编程Formily 核心架构解析基于 formily/reactive 响应式领域模型的设计原理Formily 核心架构解析基于 formily/reactive 响应式领域模型的设计原理 导读 本文围绕 packages/core/docs/guid前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考