我在参考开源项目改写一段监听滚轮,更改编辑器缩放的 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;