最近业余时间一直在学习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 流总会有一个新的值流出。而 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>
);
}
网友评论