effect返回runner单测实现示例详解
更新时间:2022年12月9日 16:11 点击:697 作者:IamZJT_
一、 runner 单测
首先介绍一下runner
的功能,分以下几点:
effect(fn)
执行会返回一个runner
函数;- 执行
runner
,相当于重新执行一遍effect
里面传入的fn
(原始依赖); - 最后
runner
的返回值就是fn
的返回值。
至于runner
的作用,可以看做是对外暴露ReactiveEffect
实例的run
方法。
- 一方面是为了可以手动调用触发依赖;
- 另一方面,也是为了和
stop
结合使用,来手动控制响应式的生效与失效;
具体点就是:使用者可以手动执行runner()
来控制副作用函数
的生效 和 执行stop(runner)
也就是runner.effect.stop()
使之失效,具体stop
的实现实现后面再说。
还是先来看一下单测吧,单测用例如下:
it('runner', function () { // effect(fn) -> return 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'); });
二、 核心逻辑实现
// + 为新增加的代码。
class ReactiveEffect { private _fn: any; constructor(fn) { this._fn = fn; } run() { activeEffect = this; // + 返回fn的返回值 return this._fn(); } } export function effect(fn) { const _effect = new ReactiveEffect(fn); _effect.run(); // + 涉及到run()中this指向的问题,所以需要bind处理一下。 return _effect.run.bind(_effect); }
具体实现较为简单,上述代码中也有相应注释,这里就不再赘述了。
再次完整跑一遍effect单测,保证新功能的增加对以往实现功能不造成影响。
单测结果如下:
以上就是effect返回runner单测实现示例详解的详细内容,更多关于effect返回runner单测的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7172683900282634254
相关文章
springboot CommandLineRunner接口实现自动任务加载功能
这篇文章主要介绍了springboot CommandLineRunner接口实现自动任务加载功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-27关于C/C++中的side effect(负效应)和sequence point(序列点)
不知你在写code时是否遇到这样的问题?int i = 3; int x = (++i) + (++i) + (++i); 问x值为多少?进行各种理论分析,并在编译器上实践,然而可能发现最终的结果是不正确的,也是不稳定的,不同的编译器可能会产生不同的结果。这让人很头疼...2020-04-25- 今天通过本文给大家介绍docker配置Runner容器的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-11-02
python使用HTMLTestRunner导出饼图分析报告的方法
这篇文章主要介绍了python使用HTMLTestRunner导出饼图分析报告的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-06- 这篇文章主要介绍了使用useEffect模拟组件生命周期,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-09-16
- 这篇文章主要介绍了react中的watch监视属性-useEffect使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-09-16
- 这篇文章主要为大家介绍了effect返回runner单测实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-12-09
如何解决React useEffect钩子带来的无限循环问题
本文主要介绍了解决ReactuseEffect钩子带来的无限循环问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2022-07-07- 这篇文章主要为大家介绍了vue3调度器effect的scheduler功能实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-12-09