如何将 RxJs 连接到 React 组件

Question

大多数使用 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()？在哪种情况下，我想保留对所有订阅者（事件侦听器）的引用？在这种情况下，这似乎比旧的（回调）方式复杂得多。

对此有何建议、想法？

Answer 1

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

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

添加引用到按钮