RxJS + React hooks

最近业余时间一直在学习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的故事

转载于:https://juejin.im/post/5ce53b4f6fb9a07ed22444f4