React hooks滚动事件性能问题

Question

任务：

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

在这里您可以检查live example。

问题：

图像移动但帧速率极低。

预期的行为：

快速流畅的移动。

详细说明：

非常感谢您阅读本文！我真的很困惑这个问题。在桌面版本上，我只是将图像位置与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调用-有很多基于钩子的示例可用。