最近业余时间一直在学习React hooks，以及RxJS。就想着能不能在实际项目中将React hooks和RxJS结合起来使用，突发奇想查阅了一下资料，发现一个人气较高的开源项目，学习一下。

rxjs-hooks

rxjs-hooks是一个开源项目：LeetCode-OpenSource/rxjs-hooks。

rxjs-hooks 有完整的测试用例，测试覆盖率 100%。目前一共只有两个 hooks：​useObservable​和 ​useEventCallback​。还是直接用例子解释来得简单明了，让我们首先回想一下，怎么在 React Component 中创建、订阅，并销毁一个流。大概是这个样子：点击查看在线效果

class App extends React.Component {state = {val: 0};componentDidMount() {const numbers = Rx.Observable.interval(1000);this.subscription = numbers.subscribe(val => {console.log("val=", val);this.setState({ val });});}componentWillUnmount() {this.subscription.unsubscribe();}render() {return <h1>{this.state.val}</h1>;}
}
复制代码

手动订阅，手动管理声明周期，还要通过 React 中的 state 搭建一个与 render 函数 (UI) 之间的桥梁。那么使用 rxjs-hooks 之后呢：点击查看在线效果

function App() {const val = useObservable(() => Rx.Observable.interval(1000), 0);return <h1>{val}</h1>;
}
复制代码

没有手动订阅，不需要再理会生命周期的管理。只需要一个不到 1kb 的依赖，就能在 React 世界里快乐地拥抱 RxJS 。

API 详解

1. useObservable

案例 1：无默认值，不依赖外部状态

function Timer() {const val = useObservable(() => interval(1000));return <h1>{val}</h1>
}
复制代码

在此案例中，仅传递了第一个参数，它是 Observable 的工厂函数，需要返回一个 Observable，而 useObservable 的返回值永远是流的最新值。首次渲染只有一个内容为空的h1标签，1秒后，内容变为0，2 秒后，内容变为1

案例 2：有默认值

function Timer() {const val = useObservable(() => interval(1000), -1);return <h1>{val}</h1>
}
复制代码

在第二个案例中，我们传递了第二个参数，它就是 ​val​ 的默认值。所以在这种情况下，首次渲染的内容不再为空，而是 ​-1​。

案例 3：依赖上一次的执行状态

如果你需要在流中获得上一次输出的结果时，工厂函数会传入一个 ​state$​ 流来帮助你做到这一点。（此处一定要使用 ​withLatestFrom​ 来结合这个流，否则会造成无限循环）。点击查看在线效果

function App() {const val = useObservable(state$ =>Rx.Observable.interval(1000).withLatestFrom(state$).map(([index, prevVal]) => index + prevVal),0);// first render:    0// 1s later:        1    (1 + 0)// 2s later:        3    (2 + 1)// 3s later:        6    (3 + 3)// 4s later:       10    (4 + 6)return <h1>{val}</h1>;
}
复制代码

案例 4：依赖外部状态

工厂函数可以依赖一些外部传入的状态，通过 useObservable 的第三个参数传入（和 useEffect，useMemo 的接口类似）

如果传递了第三个参数，那么工厂函数中，就会得到两个流，分别为 ​input​。在下面的例子中，​input​ 流。点击查看在线效果

function Timer({ a }) {const [b, setB] = useState(0);const val = useObservable((inputs$, _state$) => timer(1000).pipe(combineLatest(inputs$),map(([_, [a, b]]) => a + b),),0,[a, b],);return (<div><h1>{val}</h1><button onClick={() => setB(b + 10)}>b: +10</button></div>)
}
function App() {const [a, setA] = useState(100);return (<div><Timer a={a} /><button onClick={() => setA(a + 100)}>a: +100</button></div>);
}
复制代码

2. useEventCallback

我们相信 RxJS 不仅十分擅长处理数据流，同时在处理一些交互逻辑上也有很大的帮助。因此我们设计了第二个 API ​useEventCallback​，它接受的三个参数。其中，后两个参数与 ​useObservable​ 有很大相似之处，因此这边着重介绍第一个形参与返回值。

首先来看看下面的例子，可以很容易地看出：返回值和 useEventCallback 不一样了，它会返回一个 ​[callback, value]​ 元组。同时接受的工厂函数，接受一个event$参数，每当 ​callback​ 被调用时，​event$​ 流总会有一个新的值流出。而 ​useEventCallback​ 函数的第二个参数依旧是我们熟悉的默认值。点击查看在线效果

function App() {const [clickCallback, [description, x, y]] = useEventCallback((event$) =>event$.pipe(map((event) => [event.target.innerHTML, event.clientX, event.clientY]),),["nothing", 0, 0],)return (<div className="App"><h1>click position: {x}, {y}</h1><h1>"{description}" was clicked.</h1><button onClick={clickCallback}>click me</button><button onClick={clickCallback}>click you</button><button onClick={clickCallback}>click him</button></div>);
}
复制代码

扩展阅读

前端早读课【第1434期】渔人和Rxjs的故事