rxjs练习

参考https://jerryzou.com/posts/rxjs-practice-01/

下面是自己写的有点问题，不应该用bufferCount去存，应该想链接里的一样取点击的初始值

import React, { useRef, useEffect } from "react";
import { fromEvent, zip, timer, of } from "rxjs";
import {
  switchMap,
  takeUntil,
  map,
  bufferCount,
  tap,
  mergeMap
} from "rxjs/operators";

function App() {
  const boxRef = useRef(null);
  const boxRef2 = useRef(null);
  useEffect(() => {
    const mouseDown$ = fromEvent(boxRef.current, "mousedown");
    const mouseUp$ = fromEvent(document, "mouseup");
    const mouseMove$ = fromEvent(document, "mousemove");

    const subscription = mouseDown$
      .pipe(
        switchMap(_ => mouseMove$.pipe(takeUntil(mouseUp$))),
        map(({ pageX, pageY }) => ({ pageX, pageY })),
        bufferCount(2, 1),
        map(([prev, cur]) => {
          return {
            pageX:
              cur.pageX - prev.pageX + parseInt(boxRef.current.style.left || 0),
            pageY:
              cur.pageY - prev.pageY + parseInt(boxRef.current.style.top || 0)
          };
        }),
        mergeMap(({ pageX, pageY }) => {
          return zip(timer(0, 100), of(boxRef, boxRef2)).pipe(
            tap(([_, boxRef]) => {
              boxRef.current.style.top = pageY + "px";
              boxRef.current.style.left = pageX + "px";
            })
          );
        })
      )
      .subscribe();

    return subscription.unsubscribe;
  }, []);
  return (
    <>
      <div
        ref={boxRef}
        style={{
          zIndex: 10,
          width: "200px",
          height: "200px",
          backgroundColor: "green",
          position: "absolute"
        }}
      ></div>
      <div
        ref={boxRef2}
        style={{
          width: "200px",
          height: "200px",
          backgroundColor: "red",
          position: "absolute"
        }}
      ></div>
    </>
  );
}

export default App;