effect返回的实现
effect返回主要增加的两个点:
1 effect(fn) 调用返回一个runner函数
2 runner函数调用后返回fn中的return的值
给上测试用例:
it("should return runner when call effect",()=>{
// effect(fn) 调用返回一个runner函数 - runner函数调用后返回fn中的return的值
let foo = 10
const runner = effect(()=>{
foo++
return 'foo'
})
expect(foo).toBe(11)
const r = runner()
expect(foo).toBe(12)
expect(r).toBe('foo')
})
1 调用effect返回一个runner函数,其实主要就讲_effect.run返回出去就行了,但是由于run函数中使用到了this,所以我们需要为返回的run函数bind他的this指向。代码如下:
export function effect(fn){
const _effect = new ReactiveEffect(fn)
_effect.run()
return _effect.run.bind(_effect)
}
主要增加了 return _effect.run.bind(_effect)
2 runner函数调用后返回fn中的return的值,fn是在effect对象中的run方法中执行的,所以只需要将effect中的run方法中调用的fn函数返回的值返回就ok了。run函数改如下:
run(){
// 依赖收集之前去给激活的effect赋值
activeEffect = this
return this._fn()
}
主要是将this._fn()函数调用的的返回值返回了出来