chore(reactive): improve strict mode update strategy

alibaba · Jun 27, 2022 · c3002bd · c3002bd
1 parent 5c12281
commit c3002bd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/reactive-react/src/hooks/useForceUpdate.ts b/packages/reactive-react/src/hooks/useForceUpdate.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
+import { useLayoutEffect } from './useLayoutEffect'
 import { useDidUpdate } from './useDidUpdate'
 
 const EMPTY_ARRAY: any[] = []
@@ -7,17 +8,20 @@ const RENDER_QUEUE = new Set<() => void>()
 
 export function useForceUpdate() {
   const [, setState] = useState([])
-  const unMountRef = useRef(false)
-
-  useEffect(() => {
-    unMountRef.current = false
+  const renderedRef = useRef(false)
+  useLayoutEffect(() => {
+    renderedRef.current = true
     return () => {
-      unMountRef.current = true
+      renderedRef.current = false
     }
   }, EMPTY_ARRAY)
 
   const update = useCallback(() => {
-    if (unMountRef.current) return
+    if (!renderedRef.current) {
+      // 针对StrictMode无法快速回收内存，只能考虑拦截第一次渲染函数的setState，
+      // 因为第一次渲染函数的setState会触发第二次渲染函数执行，从而清理掉第二次渲染函数内部的依赖
+      return
+    }
     setState([])
   }, EMPTY_ARRAY)
 

diff --git a/packages/reactive-react/src/hooks/useObserver.ts b/packages/reactive-react/src/hooks/useObserver.ts
@@ -23,7 +23,6 @@ export const useObserver = <T extends () => any>(
   )
   if (!trackerRef.current) {
     trackerRef.current = new Tracker(() => {
-      if (!mountedRef.current) return
       if (typeof options?.scheduler === 'function') {
         options.scheduler(forceUpdate)
       } else {
@@ -43,19 +42,18 @@ export const useObserver = <T extends () => any>(
   }
 
   React.useEffect(() => {
-    mountedRef.current = true
-    gcRef.current.close()
     const dispose = () => {
       if (trackerRef.current && !mountedRef.current) {
         trackerRef.current.dispose()
         trackerRef.current = null
       }
     }
+    mountedRef.current = true
+    gcRef.current.close()
     return () => {
       mountedRef.current = false
       immediate(dispose)
     }
   }, [])
-
   return trackerRef.current.track(view)
 }
diff --git a/packages/reactive/src/array.ts b/packages/reactive/src/array.ts
@@ -24,11 +24,10 @@ export class ArraySet<T> {
   }
 
   delete(item: T) {
-    const eachIndex = this.forEachIndex
     const findIndex = this.value.indexOf(item)
     if (findIndex > -1) {
       this.value.splice(findIndex, 1)
-      if (findIndex <= eachIndex) {
+      if (findIndex <= this.forEachIndex) {
         this.forEachIndex -= 1
       }
     }