实现effect返回runner

29 阅读1分钟

effect的逻辑: 调用effect(参数fn)之后,会返回一个function,我们称之为runner,当调用runner会再次执行传给effect内部的fn,并且返回fn对应的返回值。 单元测试:

it('', () => {
  let foo = 10;
  const runner = effect(() => {
    foo++;
    return 'foo';
   });
   effect(foo).toBe(11);
   const r = runner();
   expect(foo).toBe(12);
   expect(r).toBe('foo');
})

js代码实现:

class ReactiveEffect{
 private _fn:any;
 constructor(fn){
   // 存储fn
   this._fn = fn;
  };
 run(){
  //this存下来,方便后面track和trigger
  activeEffect = this;
  // 返回fn的执行结果
  return this._fn();
  }
}
let activEffect;
export function effect(fn){
  const _effect = new ReactiveEffect(fn);
  // 自身先调用一次
  _effect.run();
  // 要返回的是一个函数,需要重复调用
  return _effect.run();
}