如何将 RxJs 连接到 React 组件答案

【问题标题】：How to connect RxJs to React component如何将 RxJs 连接到 React 组件
【发布时间】：2018-05-29 16:38:37
【问题描述】：

大多数使用 RxJS 观察按钮点击的例子如下：

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

这在 React 中可以吗？既然有虚拟 DOM，那么像这样引用真实 DOM 还可以吗？重新渲染后会发生什么？订阅丢失了吗？

即他们使用document.querySelector。但是当我写我的 render() 方法时，我已经习惯了<button onClick={...} >。在 React 中推荐的方法是什么？摆脱 JSX 中的 onClick，向我的按钮添加一个类/ID，或者可能是一个引用，然后使用上面的样式？

另外，我应该在任何地方取消订阅吗？在componentWillUnmount()?在这种情况下，我想保留对所有订阅者（事件侦听器）的引用？在这种情况下，这似乎比旧的（回调）方式复杂得多。

对此有何建议和想法？

【问题讨论】：

在我的项目中，我大量使用rxjs，我保留了react 的onClick={...}。如果你需要一个事件流来做一些花哨的事情，你总是可以创建一个ReplaySubject 并在那里发出。 [不是答案，如果能找到兼具两种优势的解决方案会很酷]
<button onClick={ onClickStream$.next(e) }> where this.onClickStream$ = new Rx.Subject() 怎么样？
这听起来是个好建议。就像你建议的那样，我已经尝试过使用主题。这样，多个 UI 组件可以“发布”到同一个流。顺便说一句，为什么变量中的 $ ？ $tream 的约定？必须添加功能：<button onClick={ e=>onClickStream$.next(e) }
是的，这只是一个约定（不推荐也不禁止，哈哈）。由于Subject 既是Observable 又是Observer，因此您通常会像这样订阅this.onClicksStream$.asObservable().subscribe()，但我不知道如何看待发射到同一流的各种来源，因为您的Observers将收到所有流式传输事件的通知，我认为这不是您想要的。
关于同一流上的多个 UI 的主题，我在想一个菜单项、一个快捷键和一个按钮是否应该做同样的事情（例如保存）。没有不同的按钮（保存/取消）。使用单独的主题/流和合并可能更干净。

标签： javascript reactjs rxjs

【解决方案1】：

const buttonRef = useRef(null)
useEffect( () => {
    const start$ = fromEvent(buttonRef.current, 'click').subscribe( click => {
        console.log('click event :', click)
    })

    return () => {
        start$.unsubscribe()
    }
}, [])

为按钮添加引用

【讨论】：

虽然这段代码可能有效，但请考虑添加解释原因。
还反应文档说要保留参考。