[React] 我在参考开源项目改写一段监听滚轮,更改编辑器缩放的 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<HTMLDivElement> | undefined
    content:MutableRefObject<HTMLDivElement> | undefined
    scaleCallback?: (dsData: DragScaleData) => void;

}


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

   const [wheelEvent,setWheelEvent] = useState<WheelEvent>()
  const [position, setPosition] = useState<IPoint>({ 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;