reactjs - React 中非常快速的 setState 调用的性能问题？

Question

我创建了一个简单的可拖动组件。我正在使用 react-swipeable 库，但我的问题是关于任何重复和快速连续更新 useState 的事件。
通过console.log中的onSwiping，我可以看到该函数每秒被调用多次，这就是我更新组件位置所需要的。这有效，但是如此频繁地调用 setSwipeX 是否存在性能问题？
整个组件在拖动时会非常快速地重新渲染。这是可以的，还是只更新 swipeX 而不重新渲染整个组件会更好，这甚至可能吗？

import React from "react";
import { useSwipeable } from "react-swipeable";

export default function App() {
  const [swipeX, setSwipeX] = React.useState(0);

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      console.log(e);
      setSwipeX(-e.deltaX);
    },
    trackMouse: true
  });

  return (
    <div
      className="App"
      {...swipeHandlers}
      style={{
        transform: `translateX(${swipeX}px)`
      }}
    >
      <h1>Stuff</h1>
    </div>
  );
}

https://codesandbox.io/s/relaxed-minsky-ni7n9?file=/src/App.js

Answer 1

我不是性能方面的专家，但几周前我已经实现了一个组件，可以让您向下滑动页面组件。这与你正在做的非常相似，但在垂直方向上。我第一次尝试使用 useState 这样做时，我的 Pixel 3a 没有问题。但是当我在 Nexus 5x 上测试时，它一点也不流畅。当我将逻辑更改为使用 useRef 而不是 userState 时，感觉更流畅了。像这样的东西:

import React from "react";
import { useSwipeable } from "react-swipeable";

export default function App() {
  const ref = React.useRef(null);

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      console.log(e);
      ref.style.transform = `translateX(${-e.deltaX}px)`;
    },
    trackMouse: true
  });

  return (
    <div
      className="App"
      {...swipeHandlers}
      ref={ref}
    >
      <h1>Stuff</h1>
    </div>
  );
}

这样，您就可以直接更改 DOM。再次提到，我没有通过数字来测试它，但在低端设备上我可以看到一些差异。