在滚动事件中响应 js 组件 re-render 两次

Question

我想让 header 在向下滚动时不可见，在向上滚动时使它可见

const [showHeaderState, setShowHeaderState] = useState(true);
      const prevScrollpos = useRef(window.pageYOffset);
    
      const handleScroll = () => {
        const currentScrollPos = window.pageYOffset;
        prevScrollpos.current < currentScrollPos
          ? setShowHeaderState(false)
          : setShowHeaderState(true);
        prevScrollpos.current = currentScrollPos;
      };
    
      useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
    
      console.log(showHeaderState);

此代码有效

但是当我记录渲染状态时显示组件渲染了两次

on scroll up log true two times

on scroll down log false two times

任何解决方案??

Answer 1

仅仅因为 console.log 是运行ning 并不意味着您的组件实际上渲染了两次，因为 React 可以运行组件功能的一部分，而无需在完整的过程中提交这些更改使成为。如果你想检查是否正在发生额外的完整渲染，请在没有依赖关系的效果挂钩中放置一个 console.log（每次出现 re-render 时都会运行）：

useEffect(() => { console.log("render") })

并查看它被记录了多少次。每次状态更改只能运行一次。

对这种现象提供了更完整的解释。

在滚动事件中响应 js 组件 re-render 两次

React js component re-render two times in scroll event

javascript

rendering

reactjs

react-component

我想让 header 在向下滚动时不可见，在向上滚动时使它可见