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，或者可能是ref，并使用上面的样式？

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

有任何建议，想法吗？

Answer 1

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

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

给按钮添加引用

如何将RxJs连接到React组件

1 个答案: