修复effect内嵌套effect的问题

Author: chenfan0

src/reactive/effect.ts

@@ -1,9 +1,29 @@
 import { extend } from "../shared/index";
 
-let activeEffect: ReactiveEffect;
+// 这里使用一个变量保存活跃的effect，
+// 但是如果存在effect嵌套的情况，就会有问题，需要把这个变成一个栈。
+let activeEffect: ReactiveEffect | undefined;
+const effectStack: ReactiveEffect[] = [];
 let shouldTrack;
 const targetMap = new WeakMap();
 
+const trackStack: boolean[] = [];
+
+export function pauseTracking() {
+  trackStack.push(shouldTrack);
+  shouldTrack = false;
+}
+
+export function enableTracking() {
+  trackStack.push(shouldTrack);
+  shouldTrack = true;
+}
+
+export function resetTracking() {
+  const last = trackStack.pop();
+  shouldTrack = last === undefined ? true : last;
+}
+
 export class ReactiveEffect {
   // effect传递的第一个参数
   private _fn: (...args) => void;
@@ -21,16 +41,22 @@ export class ReactiveEffect {
   }
 
   run(...args) {
-    activeEffect = this;
     if (!this.active) {
       return this._fn(...args);
     }
-
-    shouldTrack = true;
-
-    const res = this._fn(...args);
-    shouldTrack = false;
-    return res;
+    if (!effectStack.includes(this)) {
+      effectStack.push((activeEffect = this));
+
+      // 
+      enableTracking()
+
+      const res = this._fn(...args);
+      resetTracking()
+      effectStack.pop();
+      const n = effectStack.length;
+      activeEffect = n > 0 ? effectStack[n - 1] : undefined;
+      return res;
+    }
   }
 
   stop() {
@@ -68,7 +94,8 @@ export function track(target, key) {
 
 export function trackEffects(dep) {
   dep.add(activeEffect);
-  activeEffect.deps.push(dep);
+
+  activeEffect!.deps.push(dep);
 }
 
 export function isTracking() {
@@ -79,6 +106,7 @@ export function trigger(target, key) {
   const depsMap = targetMap.get(target);
   if (!depsMap) return;
   const dep = depsMap.get(key);
+
   triggerEffects(dep);
 }
 

src/reactive/effectScope.ts

@@ -0,0 +1,9 @@
+export class EffectScope {
+  effects: any[] = []
+  run(fn) {
+    const res = fn()
+    return res
+  }
+}
+
+export function effectScope() {}

src/reactive/test/effect.spec.ts

@@ -101,4 +101,31 @@ describe("effect", () => {
     stop(runner);
     expect(onStop).toBeCalledTimes(1);
   });
+
+  
+  it("nested effect", () => {
+    let dummy;
+    let dummy1;
+    let obj = reactive({
+      count: 1,
+    });
+
+    // effect1 effect2
+    // 执行effect1过程又会
+    effect(() => {
+      console.log(111);
+      effect(() => {
+        console.log(222);
+
+        dummy = obj.count;
+      });
+      dummy1 = obj.count;
+    });
+
+    expect(dummy).toBe(1);
+    expect(dummy1).toBe(1);
+    obj.count = 2;
+    expect(dummy).toBe(2);
+    expect(dummy1).toBe(2);
+  });
 });

src/reactive/test/effectScope.spec.ts

@@ -0,0 +1,35 @@
+import { reactive } from "../reactive";
+import { effect } from "../effect";
+import { effectScope, EffectScope } from "../effectScope";
+
+describe("reactivity/effect/scope", () => {
+  it("should run", () => {
+    const fnSpy = jest.fn(() => {});
+    new EffectScope().run(fnSpy);
+    expect(fnSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should accept zero argument", () => {
+    const scope = new EffectScope();
+    expect(scope.effects.length).toBe(0);
+  });
+
+  it("should return run value", () => {
+    expect(new EffectScope().run(() => 1)).toBe(1);
+  });
+
+  // it("should collect the effects", () => {
+  //   const scope = new EffectScope();
+  //   scope.run(() => {
+  //     let dummy;
+  //     const counter = reactive({ num: 0 });
+  //     effect(() => (dummy = counter.num));
+
+  //     expect(dummy).toBe(0);
+  //     counter.num = 7;
+  //     expect(dummy).toBe(7);
+  //   });
+
+  //   expect(scope.effects.length).toBe(1);
+  // });
+});