在scroll事件[duplicate]中对js组件重新渲染两次

Question

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);

此代码正在运行

但是当我日志渲染状态显示是组件渲染两次

上滚动日志true两次

向下滚动log false两次

有什么解决办法吗？？

Answer 1

仅仅因为console.log正在运行并不意味着您的组件实际上正在渲染两次，因为React可以运行组件的部分函数，而无需在完整的渲染中提交这些更改。如果您想检查是否有其他完整的渲染，请在没有依赖关系的效果钩子内放置console.log（每次重新渲染都会运行）：

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

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

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