React Hook 优化：基于滚动速度控制导航栏显隐-js教程-PHP中文网

React Hook 优化：基于滚动速度控制导航栏显隐

霞舞

发布： 2025-08-19 17:08:27

原创

1048人浏览过

react hook 优化：基于滚动速度控制导航栏显隐

本文将深入探讨如何使用 React Hook 实现一个根据页面滚动速度动态控制导航栏显隐效果的功能，并针对性能进行优化。我们将分析原始 Hook 的潜在问题，并提供一个经过改进的版本，重点关注 useCallback 的使用以及依赖项的管理，从而提升 Hook 的效率和稳定性。

理解需求

目标是创建一个 React Hook，它能够控制导航栏的可见性，使其在页面顶部时始终可见，向下滚动时隐藏，并在快速向上滚动时重新显示，模仿如 Humboldt forum 网站的体验。

原始 Hook 分析

原始 Hook 的实现思路是监听 scroll 事件，计算滚动速度，并根据滚动方向和速度来更新导航栏的 visible 状态。然而，它存在一些潜在的性能问题：

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

handleScroll 函数频繁创建： 每次组件渲染时，handleScroll 函数都会被重新创建，这会导致不必要的函数重新定义和内存分配。
useEffect 依赖项不完整： useEffect 的依赖项列表中只包含了 window.scrollY，这意味着只有当 window.scrollY 发生变化时，useEffect 才会执行。然而，handleScroll 函数依赖于 currentScrollPos、prevScrollPos 和 lastScrollTime 等状态，这些状态的变化并没有触发 useEffect 的重新执行。
不必要的状态更新： 即使滚动位置没有发生变化，handleScroll 仍然会被调用，导致不必要的计算和状态更新。

优化后的 Hook 实现

为了解决上述问题，我们对原始 Hook 进行了优化，主要改进如下：

使用 useCallback 优化 handleScroll： 使用 useCallback 将 handleScroll 函数包裹起来，并指定其依赖项为 currentScrollPos、prevScrollPos、lastScrollTime、setVisible 和 maxScrollSpeed。这样，只有当这些依赖项发生变化时，handleScroll 函数才会被重新创建，从而避免了不必要的函数重新定义。
完善 useEffect 依赖项： 将 handleScroll 和 navHeight 添加到 useEffect 的依赖项列表中。这样，当 handleScroll 函数或 navHeight 发生变化时，useEffect 都会重新执行，确保 Hook 的行为与预期一致。

import { useState, useEffect, useCallback } from 'react';

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 now = new Date().getTime();
    const distance = Math.abs(currentScrollPos - prevScrollPos);
    const scrollSpeed = distance / (now - lastScrollTime);

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

    setPrevScrollPos(currentScrollPos);
    setLastScrollTime(now);
  }, [currentScrollPos, prevScrollPos, lastScrollTime, setVisible, maxScrollSpeed]);

  useEffect(() => {
    const handleInitialScroll = () => {
      setCurrentScrollPos(window.scrollY);
      if (window.scrollY < navHeight) {
        setVisible(true);
      }
    };

    handleInitialScroll(); // Initial scroll position check

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll, navHeight]);

  useEffect(() => {
    const handleCurrentScroll = () => {
        setCurrentScrollPos(window.scrollY);
    }
    window.addEventListener('scroll', handleCurrentScroll)
    return () => {
        window.removeEventListener('scroll', handleCurrentScroll)
    }
  },[])

  return visible;
};

export default useScrollSpeed;

登录后复制

使用示例

import useScrollSpeed from './useScrollSpeed';

function MyComponent() {
  const navHeight = 60; // 导航栏高度
  const maxScrollSpeed = 0.5; // 最大滚动速度
  const visible = useScrollSpeed(navHeight, maxScrollSpeed);

  return (
    <nav style={{ display: visible ? 'block' : 'none' }}>
      {/* 导航栏内容 */}
    </nav>
  );
}

登录后复制