我在参考开源项目改写一段监听滚轮,更改编辑器缩放的 hooks,虽然实现了我的功能,但是这个 hooks 写的我感觉怪怪的,请教下大佬其中的问题

组件代码

const DesignerDragScaleContainer =()=>{const { setScale, setRatio} = useAppStore();

const scaleCallback = useCallback((dsData: DragScaleData) => {console.log("缩放率回调:" + JSON.stringify(dsData.scale));

    setScale(dsData.scale);
    setRatio(dsData.ratio);
  },
  [setScale, setRatio]
);

useDragScaleProvider({
  container: containRef,
  content: contentRef,
  scaleCallback: scaleCallback,
});

}

hooks 相关

export interface DragScaleData {
  scale: number;
  ratio: number;
  position: IPoint;
}

interface DragScaleParams{container:MutableRefObject | undefined
    content:MutableRefObject | undefined
    scaleCallback?: (dsData: DragScaleData) => void;

}


export function useDragScaleProvider(params: DragScaleParams) {const { container, scaleCallback} = params;
  const {scale, ratio, compute} = useScaleCore();

   const [wheelEvent,setWheelEvent] = useState()
  const [position, setPosition] = useState({x: 0, y: 0});

  const handleWheel = useCallback((e: WheelEvent): void => {if (e.altKey && e.buttons !== 2) {compute(e.deltaY> 0 ? 0 : 1);
      // setWheelEvent(e)
    }
  }, [compute]);

  useEffect(() => {const handleWheelWithCallback = (e: WheelEvent) => {handleWheel(e);
    };

    const currentContainer = container.current;

    if (currentContainer) {currentContainer.addEventListener('wheel', handleWheelWithCallback, { passive: true});

      return () => {currentContainer.removeEventListener('wheel', handleWheelWithCallback);
      };
    }
  }, [container, handleWheel, scale, ratio, position, scaleCallback]);


  useEffect(()=>{scaleCallback?.({ scale, ratio, position});
  },[position, ratio, scale, scaleCallback])

  return {scale, ratio};
  }
  
  
  
function useScaleCore(initialMax = 3, initialMin = 0.05, initialScale = 1, initialRatio = 1) {const [max, setMax] = useState(initialMax);
  const [min, setMin] = useState(initialMin);
  const [scale, setScale] = useState(initialScale);
  const [ratio, setRatio] = useState(initialRatio);

  const compute = useCallback((type: number) => {
    let _ratio = 1.2;
    // 缩小
    if (type === 0) _ratio = 1 / 1.2;
    // 限制缩放倍数
    let _scale = scale * _ratio;
    if (_scale> max) {
      _ratio = max / scale;
      _scale = max;
    } else if (_scale < min) {
      _ratio = min / scale;
      _scale = min;
    }
    // 使用函数式更新方式更新 scale 和 ratio
    setScale(_scale);
    setRatio(_ratio);
  }, [max, min, scale]);

  return {max, min, scale, ratio, compute};
  }
  
  export default useScaleCore;