javascript - 如何将 RxJs 连接到 React 组件

Question

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

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

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

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

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

对此有什么建议和想法吗？

Answer 1

我已经考虑了很多 - 我认为@ArtemDevAkk 的答案是一种非常好的方法，但我不确定它是否说明了您打算如何使用数据。我想提出一种替代方法。诚然，我为此使用了钩子(Hook)，但你可以在老学校的类里面以类似的方式做到这一点。
我不得不把你的问题分成几个部分:

如何在 React 中引用 DOM 节点

如何创建主题并使其触发

如何订阅 React 中的任何 Observable (useEffect)

获取对 DOM 节点的引用
如果你要问的是如何引用一个 DOM 节点，经验法则是在 React 中访问 DOM，你使用 useRef hook ( or createRef in a Class)。
保持主题活跃(用于共享事件)
这种方法的好处是您的主题将被创建一次并无限期地保持事件状态，因此任何东西都可以随意订阅和取消订阅。我想不出在 React 项目中使用 RxJs 的充分理由，因为 React 有自己的方式来处理事件，所以很难知道这是否能解决你的问题。

function MyRxJsComponent() {

    // establish a stateful subject, so it lives as long as your component does
    const [ clicks$ ] = useState(new Subject());

    // register an event handler on your button click that calls next on your Subject
    return <button onClick={e => clicks$.next(e)}></button>
}

这将创建一个主题，只要您的组件在页面上处于事件状态，该主题就会保持事件状态。我对如何使用它的最佳猜测是使用上下文来包含您的主题(将 clicks$ 放入您的上下文中)，然后将事件推送到该主题。
请注意我没有使用 fromEvent 来创建 Observable，因为这个 Observable 将使用您的按钮创建和销毁，这使得任何东西都无法在组件之外保持订阅它。
仅在内部使用 Observable
或者(正如@ArtemDevAkk 所暗示的那样)，您可以只创建您的 Observable 供本地使用并接受将创建和销毁它的限制(这实际上可能更可取，但同样，这取决于您实际想要实现的目标)。

function MyRxJsComponent() {

    // get a reference to the button (use <button ref={buttonRef} in your component)
    const buttonRef = useRef(null)
    
    // use useEffect to tell React that something outside of its 
    // control is going to happen (note how the return is _another_ 
    // function that unsubscribes.
    useEffect( () => {

        // create the observable from the buttonRef we created
        const clicks$ = fromEvent(buttonRef.current, 'click')

        clicks$.subscribe( click => {

            // do whatever you need to with the click event
            console.log('button was clicked!', click)
        })
    
        return () => {
            start$.unsubscribe()
        }
    }, [buttonRef]);

    return <button ref={buttonRef}>Click me!</button>;
}

但是你应该吗？
我认为总的来说，我已经在上面展示了如何使用状态来让主题保持事件状态，只要你需要；您可以使用 useEffect() 订阅可观察对象，并在不再需要时取消订阅。 (我没有在本地测试过样本，所以可能需要做一些小调整..)
我提到使用 Context 与其他组件共享您的主题，这是我可以想象 RxJs 在 React 中有用的一种方式。
不过，最终，如果这就是你想做的所有事情，那么在 React 中有更好的方法来处理事件。一个简单的 <button onClick={() => console.log('clicked')}>可能就是你所需要的。 React 本身就是一个响应式库，并没有真正设计为包含 Observable 可以包含的状态量 - 您的 View 旨在简化存储在其他地方的状态投影。出于同样的原因，通常建议您不要尝试引用特定元素，除非您有特殊原因这样做。