滚动控制NavBar显示，ReactHook优化体验

本文深入探讨如何优化React Hook，以实现滚动控制NavBar可见性，提升用户体验。针对NavBar动态显示与隐藏，通过页面滚动位置、滚动方向和滚动速度进行控制，着重解决性能问题。文章详细阐述了如何利用`useCallback` Hook缓存事件处理函数`handleScroll`，避免不必要的函数重新创建和绑定，从而优化事件监听器。同时，深入分析并优化了`useEffect` Hook的依赖项，例如将`window.scrollY`的处理移至`handleScroll`中，减少了不必要的渲染。通过这些优化策略，显著提高了React Hook的性能和可维护性，旨在打造更流畅、高效的用户体验。

本文旨在优化一个用于控制NavBar可见性的React Hook，该Hook根据页面滚动位置、滚动方向和滚动速度来动态显示或隐藏NavBar。通过引入useCallback来避免不必要的函数重新创建，并详细分析了依赖项，提升了Hook的性能和可维护性，从而实现更流畅的用户体验。

React Hooks 为我们提供了在函数组件中使用 state 和其他 React 特性的强大能力。然而，不当的使用可能会导致性能问题。本文将深入探讨如何优化一个用于控制NavBar可见性的React Hook，该Hook根据页面滚动位置、滚动方向和滚动速度来动态显示或隐藏NavBar。我们将重点关注如何避免不必要的重新渲染和优化事件监听器。

使用 useCallback 优化事件处理函数

在原始的 Hook 实现中，handleScroll 函数在每次渲染时都会被重新创建。这会导致每次滚动事件触发时，都需要进行不必要的函数比较和重新绑定，从而影响性能。为了解决这个问题，我们可以使用 useCallback Hook 来缓存 handleScroll 函数。

const useScrollSpeed = (navHeight: number, maxScrollSpeed: number) => {
  const [lastScrollTime, setLastScrollTime] = useState(new Date().getTime());
  const [currentScrollPos, setCurrentScrollPos] = useState(0)
  const [prevScrollPos, setPrevScrollPos] = useState(0);
  const [visible, setVisible] = useState(true);

  const handleScroll = useCallback(() => {
    const distance = Math.abs(currentScrollPos - prevScrollPos);
    const scrollSpeed = distance / (new Date().getTime() - lastScrollTime);

    if (currentScrollPos > prevScrollPos) {
      setVisible(false);
    } else {
      if (scrollSpeed > maxScrollSpeed) {
        setVisible(true);
      }
    }

    setPrevScrollPos(currentScrollPos);
    setLastScrollTime(new Date().getTime());
  }, [currentScrollPos, prevScrollPos, lastScrollTime, setVisible, maxScrollSpeed]);

  useEffect(() => {
    setCurrentScrollPos(window.scrollY)

    if (currentScrollPos < navHeight) {
      setVisible(true);
    }
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [currentScrollPos, handleScroll, navHeight]);

  return visible;
};
export default useScrollSpeed;

useCallback 接收两个参数：要缓存的函数和一个依赖项数组。只有当依赖项数组中的值发生变化时，useCallback 才会返回一个新的函数实例。 在本例中，handleScroll 依赖于 currentScrollPos、prevScrollPos、lastScrollTime、setVisible 和 maxScrollSpeed。确保将所有必要的依赖项都包含在数组中，否则 handleScroll 函数可能不会在状态更新后正确执行。

分析和优化依赖项

在 useEffect Hook 中，window.scrollY 被用作依赖项。然而，直接使用 window.scrollY 作为依赖项会导致每次滚动时都触发 useEffect，这可能会导致性能问题。

为了避免这种情况，我们可以将 setCurrentScrollPos(window.scrollY) 移动到 handleScroll 函数中，并移除 useEffect 中对 currentScrollPos 的依赖。

const useScrollSpeed = (navHeight: number, maxScrollSpeed: number) => {
  const [lastScrollTime, setLastScrollTime] = useState(new Date().getTime());
  const [prevScrollPos, setPrevScrollPos] = useState(0);
  const [visible, setVisible] = useState(true);

  const handleScroll = useCallback(() => {
    const currentScrollPos = window.scrollY;
    const distance = Math.abs(currentScrollPos - prevScrollPos);
    const scrollSpeed = distance / (new Date().getTime() - lastScrollTime);

    if (currentScrollPos > prevScrollPos) {
      setVisible(false);
    } else {
      if (scrollSpeed > maxScrollSpeed) {
        setVisible(true);
      }
    }

    setPrevScrollPos(currentScrollPos);
    setLastScrollTime(new Date().getTime());
  }, [prevScrollPos, lastScrollTime, setVisible, maxScrollSpeed]);

  useEffect(() => {
    if (window.scrollY < navHeight) {
      setVisible(true);
    }
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [handleScroll, navHeight]);

  return visible;
};
export default useScrollSpeed;

现在，useEffect 仅在 handleScroll 和 navHeight 发生变化时才会触发，从而显著减少了不必要的渲染。 此外，初始的可见性判断也被移到了 useEffect 中，确保在组件挂载后立即执行。

总结

通过使用 useCallback 缓存事件处理函数和优化 useEffect 的依赖项，我们可以显著提高 React Hook 的性能。 关键在于理解 Hooks 的工作原理，并仔细分析哪些值应该作为依赖项，以及如何避免不必要的重新渲染。 记住，优化的目标是减少组件的渲染次数，并确保只有在必要时才执行昂贵的操作。 通过这些优化，我们可以创建一个更流畅、更高效的用户体验。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《滚动控制NavBar显示，ReactHook优化体验》文章吧，也可关注golang学习网公众号了解相关技术文章。