React hooks 滚动事件性能问题

Question

任务：

在触摸设备上，根据当前水平滚动位置获取 .container.scrollLeft 和 transform: translateX 图像。 .container 宽度大于其 .wrapper。

在这里你可以查看live example。

问题：

图像移动但 fps 极低。

预期行为：

快速流畅的移动。

详细说明：

非常感谢您阅读本文！我真的被这个问题困扰了。在桌面版上，我只是将图像位置与 onMouseMove 事件绑定，一切都很好。但是对于移动版本，我尝试了 onTouch 事件和本机滚动事件，但没有按预期工作。我一直在寻找解决方案或一些工作示例，但一无所获。所以，我来了。

Answer 1

在此 useEffect 中，您将在每次渲染时添加滚动事件侦听器。因此，当它滚动时，它会重新呈现（应该如此），但它会多次重新添加侦听器。

useEffect(() => {
    handleScroll();
    wrapperEl.current.addEventListener("scroll", handleScroll, {
      passive: true
    });
  });

在第一次渲染时添加一次监听器（使用 [] 作为依赖数组）效率要高得多（并且不太可能导致块状滚动）。您还应该通过返回一个在卸载时删除它的函数来清理它：

useEffect(() => {
    const el = wrapperEl.current;
    el.addEventListener("scroll", handleScroll, {
      passive: true
    });
    return () => el.removeEventListener("scroll", handleScroll);
  }, []);

这可能足以让事情运行顺利进行。如果没有，那么您还可以限制 handleScroll 调用 - 有许多基于挂钩的示例可用。

React hooks 滚动事件性能问题

React hooks scroll event performance issue

touch

reactjs

react-hooks