像呼吸一样自然：React hooks + RxJS

像呼吸一样自然：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