fix(reactive): fix tracker unexpect update with strict-mode (#2526)

alibaba · Nov 28, 2021 · 5a2605e · 5a2605e
1 parent 0c5c6f1
commit 5a2605e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/packages/reactive/src/__tests__/tracker.spec.ts b/packages/reactive/src/__tests__/tracker.spec.ts
@@ -64,3 +64,30 @@ test('tracker recollect dependencies', () => {
   expect(fn).toBeCalledTimes(2)
   tracker.dispose()
 })
+
+test('shared scheduler with multi tracker(mock react strict mode)', () => {
+  const obs = observable<any>({})
+
+  const component = () => obs.value
+
+  const render = () => {
+    tracker1.track(component)
+    tracker2.track(component)
+  }
+
+  const scheduler1 = jest.fn(() => {
+    tracker2.track(component)
+  })
+  const scheduler2 = jest.fn(() => {
+    tracker1.track(component)
+  })
+  const tracker1 = new Tracker(scheduler1, 'tracker1')
+  const tracker2 = new Tracker(scheduler2, 'tracker2')
+
+  render()
+
+  obs.value = 123
+
+  expect(scheduler1).toBeCalledTimes(1)
+  expect(scheduler2).toBeCalledTimes(1)
+})
diff --git a/packages/reactive/src/annotations/computed.ts b/packages/reactive/src/annotations/computed.ts
@@ -33,21 +33,21 @@ export const computed: IComputed = createAnnotation(
 
     function getGetter(target: any) {
       if (!target) {
-        if (value?.get) return value?.get
+        if (value && value.get) return value.get
         return value
       }
       const descriptor = Object.getOwnPropertyDescriptor(target, property)
-      if (descriptor?.get) return descriptor.get
+      if (descriptor && descriptor.get) return descriptor.get
       return getGetter(Object.getPrototypeOf(target))
     }
 
     function getSetter(target: any) {
       if (!target) {
-        if (value?.set) return value?.set
+        if (value && value.set) return value.set
         return
       }
       const descriptor = Object.getOwnPropertyDescriptor(target, property)
-      if (descriptor?.set) return descriptor.set
+      if (descriptor && descriptor.set) return descriptor.set
       return getSetter(Object.getPrototypeOf(target))
     }
 

diff --git a/packages/reactive/src/array.ts b/packages/reactive/src/array.ts
@@ -8,6 +8,7 @@ export const toArray = (value: any) => {
 
 export class ArraySet<T> {
   value: T[]
+  batchDeleting = false
   constructor(value: T[] = []) {
     this.value = value
   }
@@ -23,6 +24,7 @@ export class ArraySet<T> {
   }
 
   delete(item: T) {
+    if (this.batchDeleting) return //批量删除时禁止单独删除，会影响计数执行器
     const index = this.value.indexOf(item)
     if (index > -1) {
       this.value.splice(index, 1)
@@ -38,12 +40,14 @@ export class ArraySet<T> {
 
   forEachDelete(callback: (value: T) => void) {
     if (this.value.length === 0) return
+    this.batchDeleting = true
     for (let index = 0; index < this.value.length; index++) {
       const item = this.value[index]
       this.value.splice(index, 1)
       callback(item)
       index--
     }
+    this.batchDeleting = false
   }
 
   clear() {