第五章 effect返回的实现

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()函数调用的的返回值返回了出来