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的调用-有很多基于钩子的示例可用。

反应挂钩滚动事件性能问题

1 个答案: