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();
}