前言
现今的前端技术已经发展到了万物皆可编程的境界，各种优秀的前端库和框架层出不穷。而在这么多的选择面前，我们应该选择什么样的工具来提高我们的开发效率，是一个值得思考的问题。对于前端开发来说，一套好的手势操作库是非常重要的。react-use-gesture 就是一个非常不错的选择，它提供了一系列处理常见手势的方法，可以大大方便我们的开发。
什么是 react-use-gesture
react-use-gesture 是一个由 @pmndrs 维护的 React hooks 库，用来处理各种手势操作。它的作用是让你方便地用 React 来处理手势事件。
如何使用
安装
你可以通过 npm 或 yarn 来安装 react-use-gesture：
# npm npm install react-use-gesture # yarn yarn add react-use-gesture
使用
使用 react-use-gesture 很简单，只需要在某个组件上绑定一个函数，再传入一些参数，就可以处理相应的手势操作。下面我们以拖拽操作为例，来介绍一下如何使用。
-- -------------------- ---- ------- ------ - ------- - ---- -------------------- -------- --------- - ----- ---- - ---------- ------- --- -- -- -- - --------------- ----- -- ------- --- ------ ---- ------------------------ -展开代码
上面的代码使用了 useDrag 函数，它返回了一个“绑定”对象。这个“绑定”对象包含了一系列可以绑定到 DOM 元素上的事件处理函数，如 onMouseDown、onMouseMove、onTouchStart 等等。在这里，我们直接将“绑定”对象作为 props 传给了 div 元素，这样就可以触发相应的事件处理函数了。
当我们拖动 div 时，事件处理函数会被调用，传入一个对象作为参数。这个对象里有一些参数，其中 offset 表示当前坐标相对于初始坐标的偏移量。我们可以将这个偏移量输出到 console 中，方便调试。
配置项
在实际使用中，我们不仅仅只需要监测拖拽操作，还有很多其他的手势操作需要处理。react-use-gesture 为我们提供了丰富的配置项，可以让我们更好地控制手势事件的处理过程。下面我们来介绍一下常用的配置项。
event
手势事件的类型，可以是 'drag'、'wheel'、'swipe' 等等，具体可参考官方文档。如果不指定，则使用默认值 'pointerdown'。
drag
如果要监听拖拽事件，需要传入这个配置项。它是一个对象，包含了一些子配置项。
- axis：可以是 'x'、'y' 或 'xy'，表示只允许在某个轴向上拖拽。
const bind = useDrag(({ offset: [x, y] }) => { console.log(`x: ${x}, y: ${y}`); }, { drag: { axis: 'y' } });
- delay: 表示拖拽处理函数要延迟多少毫秒才开始执行。
const bind = useDrag(({ offset: [x, y] }) => { console.log(`x: ${x}, y: ${y}`); }, { drag: { delay: 1000 } });
- distance：表示手指移动的最小距离，只有超过这个距离才会触发拖拽操作。
const bind = useDrag(({ offset: [x, y] }) => { console.log(`x: ${x}, y: ${y}`); }, { drag: { distance: 50 } });
wheel
如果要监听鼠标滚轮事件，需要传入这个配置项。它是一个对象，包含了一些子配置项。
- axis：可以是 'x'、'y' 或 'xy'，表示只允许在某个轴向上滚动，如果不指定，则按照滚动距离自动选择轴向。
const bind = useWheel(({ xy: [x, y] }) => { console.log(`x: ${x}, y: ${y}`); }, { axis: 'x' });
- event：当设备不支持滚轮事件时，需要指定用哪个事件代替，默认为 'wheel'。
const bind = useWheel(({ xy: [x, y] }) => { console.log(`x: ${x}, y: ${y}`); }, { event: 'mousewheel' });
swipe
如果要监听滑动事件，需要传入这个配置项。它是一个对象，包含了一些子配置项。
- axis：可以是 'x'、'y' 或 'xy'，表示只允许在某个轴向上滑动。
const bind = useSwipe(({ direction: [xDir, yDir] }) => { console.log(`xDir: ${xDir}, yDir: ${yDir}`); }, { axis: 'x' });
- initial: 用来设置触发短滑动还是长滑动。
const bind = useSwipe(({ direction: [xDir, yDir] }) => { console.log(`xDir: ${xDir}, yDir: ${yDir}`); }, { initial: 3 }); // 可以滑动三个手指单位长度才被视为长滑动
- distance: 滑动的最小距离。只有超过这个距离才会触发滑动事件。
const bind = useSwipe(({ direction: [xDir, yDir] }) => { console.log(`xDir: ${xDir}, yDir: ${yDir}`); }, { distance: 200 });
示例代码
最后，为了加深对 react-use-gesture 的理解，我们来实现一个简单的“画板”，可以用手指在屏幕上“画画”。代码如下。
-- -------------------- ---- ------- ------ - ---------- - ---- -------------------- -------- -------------- - ----- ------- --------- - ------------- ----- ---- - ------------ ------- -- ------ ------- ----- -- -- - -- -------- - ----------------------- -- ------ ----- - -------- ------- - - ----------------- ------------------ -- --------------------------- ------------ - -- ------------ -- -- - ------------- -- --- ------ - ---- ----------- ---------- - --- ---- -------- ------------ ------ --- ----------------- ------ -- - --------- ----------- ------------------ -- ------------------- --- ----------- -------------- --------------------- --------------- -- --- ------ -- -展开代码
上面的代码中，我们使用了 useGesture 这个通用的手势处理函数。当手指在屏幕上滑动时，我们会获取到当前的坐标，然后将它保存下来。另外，当手指离开屏幕时，我们清空画布，这样才能画新的图案。
总结
使用 react-use-gesture 可以大大方便我们在 React 中处理手势操作。它提供了丰富的配置项，使我们能够更好地控制手势处理过程。通过上面的介绍和示例代码，相信你已经对 react-use-gesture 有了一定的认识，可以开始用它来开发你的应用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161306
