实现 effect 返回 runner
编写单测
it('runner', () => {
// runner 就是 effect(fn) 返回一个函数，执行该函数就相当于重新执行了一次传入 effect 的 fn
// 同时执行 runner 也会将 fn 的返回值返回
let foo = 1
const runner = effect(() => {
foo++
return 'foo'
})
expect(foo).toBe(2)
// 调用 runner
const r = runner()
expect(foo).toBe(3)
// 获取 fn 返回的值
expect(r).toBe('foo')
})
实现
// effect.ts
class ReactiveEffect {
private _fn: any
constructor(fn) {
this._fn = fn
}
run() {
activeEffect = this
const res = this._fn()
// [runner] return 运行的值
return res
}
}
// other code ...
export function effect(fn) {
const _effect = new ReactiveEffect(fn)
_effect.run()
// [runner]: 在这里将 run 方法 return 出去
// 但是要注意 this 指向问题，所以可以 bind 后 return 出去
return _effect.run.bind(_effect)
}
再次测试一下，测试样例就可以通过了
原文始发于微信公众号（WEB大前端）：实现 effect 返回 runner
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/225221.html
