性能低下 react-use-gesture 和 react-spring

如何解决性能低下 react-use-gesture 和 react-spring

文档中的拖动示例（例如 this one）非常快，并且非常准确地映射到我的手指位置。我试过一对一地复制示例，但在赶上我的手指位置时有明显的滞后。

Here is a code sandbox example 在真实设备上测试时有明显的滞后。

信息：

• React Use Gesture 版本：（我尝试了各种版本的组合，但没有任何影响，但这是代码和框中的配置）

    "react": "17.0.2","react-dom": "17.0.2","react-scripts": "4.0.0","react-spring": "9.1.2","react-use-gesture": "9.1.3"

• 设备：iPhone 12 pro max
• 操作系统：[例如iOS14.5.1]
• 浏览器铬

function PullRelease() {
  const [{ x },api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx],down }) =>
    api.start({ x: down ? mx : 0 })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40,background: "gold",x }}>
      Hello World
    </animated.div>
  );
}

解决方法

我梳理了 source code of the examples。问题实际上出在 react-spring 上，我需要在触摸处于活动状态时提供 immediate: true。

https://codesandbox.io/s/react-spring-gesture-basic-swipe-immediate-6bje9?file=/src/App.js

function PullRelease() {
  const [{ x },api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx],down }) =>
    api.start({ x: down ? mx : 0,immediate: down // the key line
    })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40,background: "gold",x }}>
      Hello World
    </animated.div>
  );
}