perf(reactive-react): improve performace with immediate

packages/reactive-react/src/hooks/useDidUpdate.ts

@@ -1,10 +1,11 @@
 import { useLayoutEffect, useRef } from 'react'
+import { immediate } from '../shared'
 
 export const useDidUpdate = (callback?: () => void) => {
-  const timer = useRef(null)
-  timer.current = setTimeout(callback)
+  const request = useRef(null)
+  request.current = immediate(callback)
   useLayoutEffect(() => {
-    clearTimeout(timer.current)
+    request.current()
     callback()
   })
 }

packages/reactive-react/src/hooks/useForceUpdate.ts

@@ -1,18 +1,6 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import ReactDOM from 'react-dom'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useDidUpdate } from './useDidUpdate'
 
-const batchUpdate =
-  React['batchUpdate'] ||
-  ReactDOM['batchUpdate'] ||
-  ReactDOM['unstable_batchedUpdates'] ||
-  ((callback: any) => callback())
-
 const EMPTY_ARRAY: any[] = []
 const RENDER_COUNT = { value: 0 }
 const RENDER_QUEUE = new Set<() => void>()
@@ -24,10 +12,8 @@ export function useForceUpdate() {
   const update = useCallback(() => {
     if (RENDER_COUNT.value === 0) {
       if (unmountRef.current) return
-      batchUpdate(() => {
-        setTick((tick) => {
-          return tick + 1
-        })
+      setTick((tick) => {
+        return tick + 1
       })
     } else {
       if (!RENDER_QUEUE.has(update)) {
@@ -41,12 +27,10 @@ export function useForceUpdate() {
   useDidUpdate(() => {
     RENDER_COUNT.value--
     if (RENDER_COUNT.value === 0) {
-      batchUpdate(() => {
-        if (unmountRef.current) return
-        RENDER_QUEUE.forEach((update) => {
-          RENDER_QUEUE.delete(update)
-          update()
-        })
+      if (unmountRef.current) return
+      RENDER_QUEUE.forEach((update) => {
+        RENDER_QUEUE.delete(update)
+        update()
       })
     }
   })

packages/reactive-react/src/hooks/useObserver.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Tracker } from '@formily/reactive'
-import { GarbageCollector } from '../gc'
+import { GarbageCollector } from '../shared'
 import { IObserverOptions } from '../types'
 import { useForceUpdate } from './useForceUpdate'
 

packages/reactive-react/src/shared/immediate.ts

@@ -0,0 +1,10 @@
+export const immediate = (callback?: () => void) => {
+  let desposed = false
+  Promise.resolve(0).then(() => {
+    if (desposed) return
+    callback()
+  })
+  return () => {
+    desposed = true
+  }
+}

packages/reactive-react/src/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './gc'
+export * from './immediate'

packages/reactive/src/annotations/computed.ts

@@ -11,28 +11,19 @@ import {
   batchEnd,
 } from '../reaction'
 
+interface IValue<T = any> {
+  value?: T
+}
 export interface IComputed {
-  <T>(compute: () => T): { value: T }
-  <T>(compute: { get?: () => T; set?: (value: T) => void }): {
-    value: T
-  }
+  <T>(compute: () => T): IValue<T>
+  <T>(compute: { get?: () => T; set?: (value: T) => void }): IValue<T>
 }
 
 export const computed: IComputed = createAnnotation(
   ({ target, key, value }) => {
-    const initialValue = Symbol('initialValue')
-    const store = {
-      value: initialValue,
-    }
+    const store: IValue = {}
 
-    const proxy = {
-      set value(value: any) {
-        set(value)
-      },
-      get value() {
-        return get()
-      },
-    }
+    const proxy = {}
 
     const context = target ? target : store
     const property = target ? key : 'value'
@@ -137,6 +128,11 @@ export const computed: IComputed = createAnnotation(
         configurable: false,
       })
       return target
+    } else {
+      Object.defineProperty(proxy, 'value', {
+        set,
+        get,
+      })
     }
     return proxy
   }

packages/reactive/src/annotations/ref.ts

@@ -15,14 +15,7 @@ export const ref: IRef = createAnnotation(({ target, key, value }) => {
     value: target ? target[key] : value,
   }
 
-  const proxy = {
-    set value(value) {
-      set(value)
-    },
-    get value() {
-      return get()
-    },
-  }
+  const proxy = {}
 
   const context = target ? target : store
   const property = target ? key : 'value'
@@ -66,6 +59,11 @@ export const ref: IRef = createAnnotation(({ target, key, value }) => {
       configurable: false,
     })
     return target
+  } else {
+    Object.defineProperty(proxy, 'value', {
+      set,
+      get,
+    })
   }
   return proxy
 })

packages/reactive/src/traverse.ts

@@ -10,7 +10,8 @@ export const buildTreeNode = ({
   shallow,
 }: IVisitor) => {
   const raw = ProxyRaw.get(value) || value
-  const parentNode = RawNode.get(ProxyRaw.get(target) || target)
+  const parentRaw = ProxyRaw.get(target) || target
+  const parentNode = RawNode.get(parentRaw)
   const currentNode = RawNode.get(raw)
   if (currentNode) return currentNode
   if (parentNode) {