背景
在 Web 开发中，拖拽是一个比较常见的需求。例如：调整 UI 元素的位置、拖拽上传文件、拖拽选择等。实现一个可扩展、高性能的拖拽效果不是一件容易的事情。利用 RxJS 结合 React，可以比较轻松地实现拖拽效果。
RxJS 简介
RxJS 是一个基于流的响应式编程库，可以提供多种操作符（如 map、filter、reduce 等）来操作数据流，并能够处理异步数据。它的基本概念是可观察对象（Observable）、订阅者（Subscriber）和操作符（Operator）。RxJS 可以与 React 结合使用，帮助我们更好地管理 React 组件的生命周期和状态。
实现拖拽效果
实现拖拽效果的核心就是监听鼠标/触摸事件，并根据事件处理函数中的数据计算目标元素的位置。利用 RxJS，可以利用 Observables 来完成这些操作。
实现步骤
- 创建一个可拖拽的 React 组件。
- 在 componentDidMount 中，建立 RxJS 订阅，并监听鼠标/触摸事件，根据事件处理函数中的数据计算目标元素的位置。
- 在 componentWillUnmount 中，释放事件订阅。
示例代码
-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - --------- - ---- -------
------ - ---------- ---------- -------- - ---- -----------------
-- -------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
----------- ------
-------- --
-------- --
----------- --
----------- --
--
----------------- - ------------------
-
------------------- -
-- ------
----- --------- - ------------------------------------ -------------
----- --------- - ------------------- -------------
----- ------- - ------------------- -----------
----- ---------- - ------------------------------------ --------------
----- --------- - ------------------- -------------
----- -------- - ------------------- ------------
-- ----
----- ---------- - ---------------
----------------- -- -
---------------
----------- -----
-------- ------------- - ----------------------
-------- ------------- - ----------------------
---
------ ---------------
-----------
------------------
--
---
--
----- ----------- - ----------------
----------------- -- -
---------------
----------- -----
-------- ------------------------ - ----------------------
-------- ------------------------ - ----------------------
---
------ ---------------
-----------
--------------------
-
---
--
-- ------
----------------- - ----------------
-----------
------------------ -- -
----- ---- - --------
----- ---- - --------
----- ------ - --------------- - ----------------
----- ------ - --------------- - ----------------
---------------
----------- --------------- - -------------------
----------- --------------- - -------------------
---
---
----------------- - -----------------
-----------
------------------ -- -
----- ---- - -------------------
----- ---- - -------------------
----- ------ - ------------ - -------------
----- ------ - ------------ - -------------
---------------
----------- ------------ - -------------------
----------- ------------ - -------------------
---
---
-
---------------------- -
-- ------
--------------------------------
-
-------- -
----- - ----------- ----------- ---------- - - -----------
------ -
----
-----------------------
--------
---------- --------------------------- ------------------
------- ---------- - ------------------ - ---------------
--
-
---------------------
------
--
-
-解析代码
- 首先，在 Draggable 组件的 constructor 中定义了组件的状态以及使用 createRef 创建了该组件的 ref。
- 在 componentDidMount 中，使用 fromEvent 分别监听了 mousedown、mousemove、mouseup 和 touchstart、touchmove、touchend 事件，并使用 switchMap 为事件提供数据流。然后通过 takeUntil 将鼠标/触摸事件以外的事件归纳在一起，避免了时间上的混乱。
- 在 touchstart 和 mousemove 事件中，更新 state 中的 isDragging、originX 和 originY 并返回 touchmove 和 mousemove 事件流给外层订阅。
- 使用 pairwise 操作符支持了事件处理函数中的数据计算，计算 deltaX 和 deltaY，最终更新 state 中的 translateX 和 translateY 值。
- 在 componentWillUnmount 中，释放事件订阅。
总结
RxJS 可以帮助我们轻松地实现拖拽效果，而这也只是 RxJS 的冰山一角。利用 RxJS，我们可以更好地管理应用程序的复杂响应式状态，并提供更好、更具可重用性和可扩展性的代码。RxJS 和 React 结合使用，可以提供一种好的方式来处理 React 组件的生命周期和状态，帮助我们建立更好的资深响应式编程实践和技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65472b787d4982a6eb18a644