React hooks 滚动事件性能问题答案

【问题标题】：React hooks scroll event performance issueReact hooks 滚动事件性能问题
【发布时间】：2019-11-13 20:30:48
【问题描述】：

任务：

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

你可以在这里查看live example。

问题：

图像移动，但 fps 极低。

预期行为：

快速流畅的移动。

详细说明：

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

【问题讨论】：

标签： reactjs touch react-hooks

【解决方案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 调用 - 有许多基于钩子的示例可用。

【讨论】：

现在好多了，谢谢！但是我在某些手机上的性能仍然存在问题。当您滚动过快的背景和图像通过黑色方块加载时。可能是因为代码警告useEffect 中缺少依赖项吗？当您将依赖项数组留空时，它会警告您缺少handleScroll。但是当您添加它时，它会警告handleScroll 在定义之前已被使用。无论如何，在大多数情况下代码都可以工作，但我想它可以更好:) 我在这里更新了我的演示 codesandbox.io/embed/dry-bird-tmy89