feat(reactive): optimize performance, computed deps change won't directly trigger upstream reaction

Author: voderl

packages/reactive/src/annotations/computed.ts

@@ -11,6 +11,7 @@ import {
   batchStart,
   batchEnd,
   releaseBindingReactions,
+  getReactionsFromTargetKey,
 } from '../reaction'
 
 interface IValue<T = any> {
@@ -91,18 +92,56 @@ export const computed: IComputed = createAnnotation(
         }
       }
     }
+
     reaction._name = 'ComputedReaction'
     reaction._scheduler = () => {
-      reaction._dirty = true
-      runReactionsFromTargetKey({
-        target: context,
-        key: property,
-        value: store.value,
-        type: 'set',
-      })
+      if (!reaction._dirty_scheduler) return
+      reaction._dirty_scheduler = false
+
+      if (!reaction._dirty) {
+        runReactionsFromTargetKey({
+          target: context,
+          key: property,
+          value: store.value,
+          type: 'set',
+        })
+        return
+      }
+
+      const deps = getReactionsFromTargetKey(context, property)
+
+      if (!deps.length) return
+
+      if (deps.every((dep) => dep._isComputed)) {
+        // all deps are computed reactions, so should dirty the upstream computed reactions
+        runReactionsFromTargetKey({
+          target: context,
+          key: property,
+          value: store.value,
+          type: 'set',
+        })
+        return
+      }
+
+      const currentValue = store.value
+      reaction()
+      reaction._dirty = false
+      const newValue = store.value
+      if (newValue !== currentValue) {
+        runReactionsFromTargetKey({
+          target: context,
+          key: property,
+          value: store.value,
+          type: 'set',
+        })
+      }
     }
+
     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
 
@@ -113,18 +152,25 @@ export const computed: IComputed = createAnnotation(
       if (!isUntracking()) {
         //如果允许untracked过程中收集依赖，那么永远不会存在绑定，因为_dirty已经设置为false
         if (reaction._dirty) {
+          // if the value is used in batch function, it will directly execute and set dirty to false
+          const currentValue = store.value
           reaction()
           reaction._dirty = false
+          const newValue = store.value
+          if (newValue === currentValue) {
+            // no need to schedule
+            reaction._dirty_scheduler = false
+          }
         }
-      } else {
-        compute()
+        bindTargetKeyWithCurrentReaction({
+          target: context,
+          key: property,
+          type: 'get',
+        })
+        return store.value
       }
-      bindTargetKeyWithCurrentReaction({
-        target: context,
-        key: property,
-        type: 'get',
-      })
-      return store.value
+
+      return descriptor.get?.call(context)
     }
 
     function set(value: any) {

packages/reactive/src/environment.ts

@@ -15,6 +15,8 @@ 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 BatchEndpoints = new ArraySet<() => void>()
 export const ObserverListeners = new ArraySet<ObservableListener>()
 export const MakeObModelSymbol = Symbol('MakeObModelSymbol')

packages/reactive/src/reaction.ts

@@ -12,6 +12,8 @@ import {
   UntrackCount,
   BatchScope,
   ObserverListeners,
+  PendingComputedReactions,
+  PendingScopeComputedReactions,
 } from './environment'
 
 const ITERATION_KEY = Symbol('iteration key')
@@ -52,7 +54,7 @@ const addReactionsMapToReaction = (
   return bindSet
 }
 
-const getReactionsFromTargetKey = (target: any, key: PropertyKey) => {
+export const getReactionsFromTargetKey = (target: any, key: PropertyKey) => {
   const reactionsMap = RawReactionsMap.get(target)
   const reactions = []
   if (reactionsMap) {
@@ -75,7 +77,15 @@ const runReactions = (target: any, key: PropertyKey) => {
   for (let i = 0, len = reactions.length; i < len; i++) {
     const reaction = reactions[i]
     if (reaction._isComputed) {
-      reaction._scheduler(reaction)
+      reaction._dirty = true
+      reaction._dirty_scheduler = true
+      if (isScopeBatching()) {
+        PendingScopeComputedReactions.add(reaction)
+      } else if (isBatching()) {
+        PendingComputedReactions.add(reaction)
+      } else {
+        reaction._scheduler(reaction)
+      }
     } else if (isScopeBatching()) {
       PendingScopeReactions.add(reaction)
     } else if (isBatching()) {
@@ -182,13 +192,18 @@ export const batchStart = () => {
 }
 
 export const batchEnd = () => {
-  BatchCount.value--
-  if (BatchCount.value === 0) {
+  if (BatchCount.value === 1) {
     const prevUntrackCount = UntrackCount.value
     UntrackCount.value = 0
+    executePendingComputedReactions()
+
+    BatchCount.value--
+
     executePendingReactions()
     executeBatchEndpoints()
     UntrackCount.value = prevUntrackCount
+  } else {
+    BatchCount.value--
   }
 }
 
@@ -198,8 +213,15 @@ export const batchScopeStart = () => {
 
 export const batchScopeEnd = () => {
   const prevUntrackCount = UntrackCount.value
-  BatchScope.value = false
   UntrackCount.value = 0
+
+  PendingScopeComputedReactions.batchDelete((reaction) => {
+    if (isFn(reaction._scheduler)) {
+      reaction._scheduler(reaction)
+    }
+  })
+
+  BatchScope.value = false
   PendingScopeReactions.batchDelete((reaction) => {
     if (isFn(reaction._scheduler)) {
       reaction._scheduler(reaction)
@@ -224,6 +246,14 @@ export const isScopeBatching = () => BatchScope.value
 
 export const isUntracking = () => UntrackCount.value > 0
 
+export const executePendingComputedReactions = () => {
+  PendingComputedReactions.batchDelete((reaction) => {
+    if (isFn(reaction._scheduler)) {
+      reaction._scheduler(reaction)
+    }
+  })
+}
+
 export const executePendingReactions = () => {
   PendingReactions.batchDelete((reaction) => {
     if (isFn(reaction._scheduler)) {