RxJS 与 React 结合实现拖动效果

背景

在 Web 开发中，拖拽是一个比较常见的需求。例如：调整 UI 元素的位置、拖拽上传文件、拖拽选择等。实现一个可扩展、高性能的拖拽效果不是一件容易的事情。利用 RxJS 结合 React，可以比较轻松地实现拖拽效果。

RxJS 简介

RxJS 是一个基于流的响应式编程库，可以提供多种操作符（如 map、filter、reduce 等）来操作数据流，并能够处理异步数据。它的基本概念是可观察对象（Observable）、订阅者（Subscriber）和操作符（Operator）。RxJS 可以与 React 结合使用，帮助我们更好地管理 React 组件的生命周期和状态。

实现拖拽效果

实现拖拽效果的核心就是监听鼠标/触摸事件，并根据事件处理函数中的数据计算目标元素的位置。利用 RxJS，可以利用 Observables 来完成这些操作。

实现步骤

1. 创建一个可拖拽的 React 组件。
2. 在 componentDidMount 中，建立 RxJS 订阅，并监听鼠标/触摸事件，根据事件处理函数中的数据计算目标元素的位置。
3. 在 componentWillUnmount 中，释放事件订阅。

示例代码

// javascriptcn.com 代码示例
// 引入必要的库
import React, { Component } from 'react';
import { fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';

// 创建可拖拽组件
class Draggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isDragging: false,
            originX: 0,
            originY: 0,
            translateX: 0,
            translateY: 0,
        };
        this.draggableRef = React.createRef();
    }

    componentDidMount() {
        // 监听拖拽事件
        const mouseDown = fromEvent(this.draggableRef.current, 'mousedown');
        const mouseMove = fromEvent(document, 'mousemove');
        const mouseUp = fromEvent(document, 'mouseup');
        const touchStart = fromEvent(this.draggableRef.current, 'touchstart');
        const touchMove = fromEvent(document, 'touchmove');
        const touchEnd = fromEvent(document, 'touchend');

        // 订阅事件
        const dragStart$ = mouseDown.pipe(
            switchMap((start) => {
                this.setState({
                    isDragging: true,
                    originX: start.clientX - this.state.translateX,
                    originY: start.clientY - this.state.translateY,
                });
                return mouseMove.pipe(
                    pairwise(),
                    takeUntil(mouseUp)
                );
            }),
        );
        const touchStart$ = touchStart.pipe(
            switchMap((start) => {
                this.setState({
                    isDragging: true,
                    originX: start.touches[0].clientX - this.state.translateX,
                    originY: start.touches[0].clientY - this.state.translateY,
                });
                return touchMove.pipe(
                    pairwise(),
                    takeUntil(touchEnd),
                )
            }),
        );

        // 订阅拖拽事件
        this.subscription = dragStart$.pipe(
            pairwise(),
        ).subscribe((data) => {
            const prev = data[0];
            const curr = data[1];
            const deltaX = curr[0].clientX - prev[0].clientX;
            const deltaY = curr[0].clientY - prev[0].clientY;
            this.setState({
                translateX: curr[0].clientX - this.state.originX,
                translateY: curr[0].clientY - this.state.originY,
            });
        });
        this.subscription = touchStart$.pipe(
            pairwise(),
        ).subscribe((data) => {
            const prev = data[0].touches[0];
            const curr = data[1].touches[0];
            const deltaX = curr.clientX - prev.clientX;
            const deltaY = curr.clientY - prev.clientY;
            this.setState({
                translateX: curr.clientX - this.state.originX,
                translateY: curr.clientY - this.state.originY,
            });
        });
    }

    componentWillUnmount() {
        // 释放事件订阅
        this.subscription.unsubscribe();
    }

    render() {
        const { translateX, translateY, isDragging } = this.state;
        return (
            <div
                ref={this.draggableRef}
                style={{
                    transform: `translate(${translateX}px, ${translateY}px)`,
                    cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
                }}
            >
                {this.props.children}
            </div>
        );
    }  
}

解析代码

• 首先，在 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