usePageScroll 会导致页面反复渲染（优化方法，暂时未解决）

我写了个组件方法，页面滚动会不停的被调用，下图是代码和bug情况：

以下是优化

const BEFORE_SCROLL_COLOR = "#fff",AFTER_SCROLL_COLOR="#333";
  usePageScroll(throttle((res) => {
    if(res.scrollTop > 100 && color !== AFTER_SCROLL_COLOR){
      settheme((data)=>({
        ...data,
        "--nutui-navbar-background":BEFORE_SCROLL_COLOR,
        "--nutui-navbar-title-font-color":AFTER_SCROLL_COLOR
      }));
      setcolor(AFTER_SCROLL_COLOR);
    }
    if(res.scrollTop < 100 && color !== BEFORE_SCROLL_COLOR){
      settheme((data)=>({
        ...data,
        "--nutui-navbar-background":"transparent",
        "--nutui-navbar-title-font-color":BEFORE_SCROLL_COLOR
      }));
      setcolor(BEFORE_SCROLL_COLOR);
    }
  },500))

欢迎大家讨论