fix: significantly improve performance by optimizing reactions recollect deps

Author: voderl

packages/core/src/models/Field.ts

@@ -160,6 +160,7 @@ export class Field<
       componentProps: observable,
       validator: observable.shallow,
       data: observable.shallow,
+      parent: observable.computed,
       component: observable.computed,
       decorator: observable.computed,
       errors: observable.computed,

packages/core/src/models/VoidField.ts

@@ -80,6 +80,7 @@ export class VoidField<
       data: observable.shallow,
       decoratorProps: observable,
       componentProps: observable,
+      parent: observable.computed,
       display: observable.computed,
       pattern: observable.computed,
       hidden: observable.computed,

packages/core/src/shared/internals.ts

@@ -152,7 +152,7 @@ export const patchFieldStates = (
   target: Record<string, GeneralField>,
   patches: INodePatch<GeneralField>[]
 ) => {
-  patches.forEach(({ type, address, oldAddress, payload }) => {
+  patches.forEach(({ type, address, oldAddress, payload, oldPayload }) => {
     if (type === 'remove') {
       if (payload) {
         // When a payload is passed, the node should be deleted. However, the address may still be used.
@@ -173,7 +173,12 @@ export const patchFieldStates = (
         }
       }
       if (address && payload) {
-        locateNode(payload, address)
+        if (oldPayload) {
+          payload.address = oldPayload.address
+          payload.path = oldPayload.path
+        } else {
+          locateNode(payload, address)
+        }
       }
     }
   })
@@ -440,6 +445,12 @@ export const spliceArrayState = (
             address: newIdentifier,
             oldAddress: identifier,
             payload: field,
+            oldPayload: fields[newIdentifier]
+              ? {
+                  address: fields[newIdentifier].address,
+                  path: fields[newIdentifier].path,
+                }
+              : undefined,
           })
           if (isNeedCleanupNode(identifier)) {
             fieldPatches.push({

packages/core/src/types.ts

@@ -111,6 +111,7 @@ export interface INodePatch<T> {
   address: string
   oldAddress?: string
   payload?: T
+  oldPayload?: Partial<T>
 }
 
 export interface IHeartProps<Context> {

packages/reactive/src/annotations/computed.ts

@@ -1,4 +1,9 @@
-import { ObModelSymbol, ReactionStack } from '../environment'
+import {
+  ObModelSymbol,
+  PendingComputedReactions,
+  PendingScopeComputedReactions,
+  ReactionStack,
+} from '../environment'
 import { createAnnotation } from '../internals'
 import { buildDataTree } from '../tree'
 import { isFn } from '../checkers'
@@ -13,6 +18,7 @@ import {
   releaseBindingReactions,
   getReactionsFromTargetKey,
 } from '../reaction'
+import { Reaction } from '../types'
 
 interface IValue<T = any> {
   value?: T
@@ -68,6 +74,13 @@ function getPrototypeDescriptor(
   return {}
 }
 
+const isAllComputedDeps = (reaction: Reaction) => {
+  if (!reaction._isComputed) return false
+  const deps = getReactionsFromTargetKey(reaction._context, reaction._property)
+  if (!deps.length) return true
+  return deps.every((dep) => isAllComputedDeps(dep))
+}
+
 export const computed: IComputed = createAnnotation(
   ({ target, key, value }) => {
     const store: IValue = {}
@@ -95,9 +108,6 @@ export const computed: IComputed = createAnnotation(
 
     reaction._name = 'ComputedReaction'
     reaction._scheduler = () => {
-      if (!reaction._dirty_scheduler) return
-      reaction._dirty_scheduler = false
-
       if (!reaction._dirty) {
         runReactionsFromTargetKey({
           target: context,
@@ -112,7 +122,7 @@ export const computed: IComputed = createAnnotation(
 
       if (!deps.length) return
 
-      if (deps.every((dep) => dep._isComputed)) {
+      if (deps.every((dep) => isAllComputedDeps(dep))) {
         // all deps are computed reactions, so should dirty the upstream computed reactions
         runReactionsFromTargetKey({
           target: context,
@@ -140,8 +150,6 @@ export const computed: IComputed = createAnnotation(
     reaction._isComputed = true
     // is need to re calculate
     reaction._dirty = true
-    // is need to schedule to notice upstream reactions
-    reaction._dirty_scheduler = true
     reaction._context = context
     reaction._property = property
 
@@ -157,9 +165,10 @@ export const computed: IComputed = createAnnotation(
           reaction()
           reaction._dirty = false
           const newValue = store.value
-          if (newValue === currentValue) {
-            // no need to schedule
-            reaction._dirty_scheduler = false
+          if (newValue !== currentValue) {
+            // if the value is changed, it should be scheduled
+            PendingComputedReactions.update(reaction)
+            PendingScopeComputedReactions.update(reaction)
           }
         }
         bindTargetKeyWithCurrentReaction({

packages/reactive/src/environment.ts

@@ -1,5 +1,6 @@
 import { ObservableListener, Reaction, ReactionsMap } from './types'
 import { ArraySet } from './array'
+import { ReactionsArraySet } from './reactions-array-set'
 import { DataNode } from './tree'
 
 export const ProxyRaw = new WeakMap()
@@ -13,10 +14,10 @@ export const BatchCount = { value: 0 }
 export const UntrackCount = { value: 0 }
 export const BatchScope = { value: false }
 export const DependencyCollected = { value: false }
-export const PendingReactions = new ArraySet<Reaction>()
-export const PendingScopeReactions = new ArraySet<Reaction>()
-export const PendingComputedReactions = new ArraySet<Reaction>()
-export const PendingScopeComputedReactions = new ArraySet<Reaction>()
+export const PendingReactions = new ReactionsArraySet<Reaction>()
+export const PendingScopeReactions = new ReactionsArraySet<Reaction>()
+export const PendingComputedReactions = new ReactionsArraySet<Reaction>()
+export const PendingScopeComputedReactions = new ReactionsArraySet<Reaction>()
 export const BatchEndpoints = new ArraySet<() => void>()
 export const ObserverListeners = new ArraySet<ObservableListener>()
 export const MakeObModelSymbol = Symbol('MakeObModelSymbol')

packages/reactive/src/reaction.ts

@@ -1,5 +1,6 @@
 import { isFn } from './checkers'
 import { ArraySet } from './array'
+import { ReactionsArraySet } from './reactions-array-set'
 import { IOperation, ReactionsMap, Reaction, PropertyKey } from './types'
 import {
   ReactionStack,
@@ -28,28 +29,29 @@ const addRawReactionsMap = (
     const reactions = reactionsMap.get(key)
     if (reactions) {
       reactions.add(reaction)
+      return reactions
     } else {
-      reactionsMap.set(key, new ArraySet([reaction]))
+      reactionsMap.set(key, new ReactionsArraySet([reaction]))
+      return reactionsMap.get(key)
     }
-    return reactionsMap
   } else {
     const reactionsMap: ReactionsMap = new Map([
-      [key, new ArraySet([reaction])],
+      [key, new ReactionsArraySet([reaction])],
     ])
     RawReactionsMap.set(target, reactionsMap)
-    return reactionsMap
+    return reactionsMap.get(key)
   }
 }
 
-const addReactionsMapToReaction = (
+const addReactionsSetToReaction = (
   reaction: Reaction,
-  reactionsMap: ReactionsMap
+  reactionsSet: ReactionsArraySet<Reaction>
 ) => {
   const bindSet = reaction._reactionsSet
   if (bindSet) {
-    bindSet.add(reactionsMap)
+    bindSet.add(reactionsSet)
   } else {
-    reaction._reactionsSet = new ArraySet([reactionsMap])
+    reaction._reactionsSet = new ArraySet([reactionsSet])
   }
   return bindSet
 }
@@ -61,9 +63,7 @@ export const getReactionsFromTargetKey = (target: any, key: PropertyKey) => {
     const map = reactionsMap.get(key)
     if (map) {
       map.forEach((reaction) => {
-        if (reactions.indexOf(reaction) === -1) {
-          reactions.push(reaction)
-        }
+        reactions.push(reaction)
       })
     }
   }
@@ -78,7 +78,6 @@ const runReactions = (target: any, key: PropertyKey) => {
     const reaction = reactions[i]
     if (reaction._isComputed) {
       reaction._dirty = true
-      reaction._dirty_scheduler = true
       if (isScopeBatching()) {
         PendingScopeComputedReactions.add(reaction)
       } else if (isBatching()) {
@@ -117,7 +116,7 @@ export const bindTargetKeyWithCurrentReaction = (operation: IOperation) => {
   if (isUntracking()) return
   if (current) {
     DependencyCollected.value = true
-    addReactionsMapToReaction(current, addRawReactionsMap(target, key, current))
+    addReactionsSetToReaction(current, addRawReactionsMap(target, key, current))
   }
 }
 
@@ -158,13 +157,11 @@ export const hasRunningReaction = () => {
 }
 
 export const releaseBindingReactions = (reaction: Reaction) => {
-  reaction._reactionsSet?.forEach((reactionsMap) => {
-    reactionsMap.forEach((reactions) => {
-      reactions.delete(reaction)
-    })
-  })
-  PendingReactions.delete(reaction)
-  PendingScopeReactions.delete(reaction)
+  // delete outdated reaction by _reactionId
+  if (typeof reaction._reactionId !== 'number') {
+    reaction._reactionId = 0
+  } else reaction._reactionId++
+
   delete reaction._reactionsSet
 }
 
@@ -183,6 +180,11 @@ export const suspendComputedReactions = (current: Reaction) => {
 
 export const disposeBindingReactions = (reaction: Reaction) => {
   reaction._disposed = true
+
+  reaction._reactionsSet?.forEach((reactionsSet) => {
+    reactionsSet.delete(reaction)
+  })
+
   releaseBindingReactions(reaction)
   suspendComputedReactions(reaction)
 }

packages/reactive/src/reactions-array-set.ts

@@ -0,0 +1,73 @@
+import { Reaction } from './types'
+
+/**
+ * work like arrayset but delete outdated reaction by _reactionId
+ */
+export class ReactionsArraySet<T extends Reaction> {
+  valueSet: Set<T>
+  reactionIdMap: Map<T, number>
+  forEachIndex = 0
+  constructor(value: T[] = []) {
+    this.valueSet = new Set()
+    this.reactionIdMap = new Map()
+    value.forEach((item) => {
+      this.add(item)
+    })
+  }
+
+  add(item: T) {
+    if (!this.has(item)) {
+      this.valueSet.add(item)
+      this.reactionIdMap.set(item, item._reactionId || 0)
+    } else {
+      this.reactionIdMap.set(item, item._reactionId || 0)
+    }
+  }
+
+  has(item: T) {
+    return this.valueSet.has(item)
+  }
+
+  update(item: T) {
+    if (this.valueSet.has(item)) {
+      this.reactionIdMap.set(item, item._reactionId || 0)
+    }
+  }
+
+  delete(item: T) {
+    const size = this.valueSet.size
+    if (size === 0) return
+    this.valueSet.delete(item)
+    this.reactionIdMap.delete(item)
+  }
+
+  forEach(callback: (value: T) => void) {
+    if (this.valueSet.size === 0) return
+    for (const item of this.valueSet) {
+      const reactionId = this.reactionIdMap.get(item)
+      if (reactionId === item._reactionId) {
+        callback(item)
+      } else {
+        this.delete(item)
+      }
+    }
+  }
+
+  batchDelete(callback: (value: T) => void) {
+    if (this.valueSet.size === 0) return
+
+    for (const item of this.valueSet) {
+      const reactionId = this.reactionIdMap.get(item)
+      if (reactionId === item._reactionId) {
+        callback(item)
+      }
+    }
+
+    this.clear()
+  }
+
+  clear() {
+    this.valueSet.clear()
+    this.reactionIdMap.clear()
+  }
+}

packages/reactive/src/types.ts

@@ -1,4 +1,5 @@
 import { ArraySet } from './array'
+import { ReactionsArraySet } from './reactions-array-set'
 
 export * from './tree'
 
@@ -69,7 +70,8 @@ export type Reaction = ((...args: any[]) => any) & {
   _disposed?: boolean
   _property?: PropertyKey
   _computesSet?: ArraySet<Reaction>
-  _reactionsSet?: ArraySet<ReactionsMap>
+  _reactionsSet?: ArraySet<ReactionsArraySet<Reaction>>
+  _reactionId?: number
   _scheduler?: (reaction: Reaction) => void
   _memos?: {
     queue: IMemoQueueItem[]
@@ -81,7 +83,7 @@ export type Reaction = ((...args: any[]) => any) & {
   }
 }
 
-export type ReactionsMap = Map<PropertyKey, ArraySet<Reaction>>
+export type ReactionsMap = Map<PropertyKey, ReactionsArraySet<Reaction>>
 
 export interface IReactionOptions<T> {
   name?: string