像呼吸一样自然:React hooks + RxJS
上个月的 React Conf 上,React 核心团队首次将 hooks 带到的公众们的眼前。起初我看到这样奇怪的东西,对它是很抗拒的。Dan 说 JavaScript 里的 this 太黑了,从其他语言转来写 React 的人会很不适应。然而 hooks 本质上也是一种黑魔法,需要理解它的本质依旧需要对 JS 的各种闭包和作用域的问题搞得很透彻才行。
然而后来,跟 hooks 打了几天交道以后,我感觉这个想法还是挺有意思的。首先推荐一下 React Conf 上的开篇演讲:React Today and Tomorrow and 90% Cleaner React With Hooks,值得一看。
我们团队一直对 RxJS 青睐有加,但一直苦于它和 React 结合起来使用实在是有些繁琐。上周
就决定在 hooks api 上试试水。结果那一整天我都听见身边在喊,“真香”。
rxjs-hooks
那么用 hooks 写 RxJS 代码究竟有多香呢?让我们一起来看看,这个让妈妈开心,开了又开的开源项目:LeetCode-OpenSource/rxjs-hooks
rxjs-hooks 有完整的测试用例,测试覆盖率 100%。目前一共只有两个 hooks:useObservable
和 useEventCallback
。还是直接用例子解释来得简单明了,让我们首先回想一下,怎么在 React Component 中创建、订阅,并销毁一个流。大概是这个样子:
import React from 'react';
import { interval } from 'rxjs';
import { tap } from 'rxjs/operators