React中useEffect内更新state的正确方式及SVG viewBox滚轮卡顿问题

一、卡顿原因 #

• 重复事件绑定：useEffect依赖了viewBox，每次viewBox更新都会重新给svgContainer绑定onwheel事件，导致同一事件被多次绑定，滚轮触发时多个回调执行，引发卡顿。
• 混合DOM操作与React状态更新：事件回调里既调用setViewBox更新state，又手动调用svg?.setAttribute修改DOM，导致React重渲染和手动DOM操作冲突，双重更新消耗性能。
• 闭包导致的状态旧值问题：直接使用当前viewBox状态计算新值，由于闭包特性，回调里拿到的可能是旧的viewBox值，导致状态更新不准确，进而触发不必要的额外渲染。
• 非state变量更新未触发同步：直接修改scale变量（非React state），无法触发视图同步，可能导致状态不一致，间接引发性能问题。

二、React中useEffect内更新state的正确方式 #

1. 使用函数式状态更新
   当新状态依赖于前一次状态时，必须用setViewBox的函数式写法，确保拿到最新的状态值：

   setViewBox(prev => {
     const dw = prev.w * Math.sign(e.deltaY) * 0.05;
     const dh = prev.h * Math.sign(e.deltaY) * 0.05;
     const dx = (dw * mx) / svgSize.w;
     const dy = (dh * my) / svgSize.h;
     return {
       x: prev.x + dx,
       y: prev.y + dy,
       w: prev.w - dw,
       h: prev.h - dh,
     };
   });
   

2. 正确绑定/清理事件监听
   用addEventListener绑定事件，并在useEffect的返回函数中移除监听，避免重复绑定；同时减少useEffect的依赖，只依赖不会频繁变化的变量：

   useEffect(() => {
     if (!svgContainer) return;
     
     const handleWheel = (e: WheelEvent) => {
       e.preventDefault();
       const mx = e.offsetX; 
       const my = e.offsetY;
       
       setViewBox(prev => {
         const dw = prev.w * Math.sign(e.deltaY) * 0.05;
         const dh = prev.h * Math.sign(e.deltaY) * 0.05;
         const dx = (dw * mx) / svgSize.w;
         const dy = (dh * my) / svgSize.h;
         return {
           x: prev.x + dx,
           y: prev.y + dy,
           w: prev.w - dw,
           h: prev.h - dh,
         };
       });
     };
     
     svgContainer.addEventListener('wheel', handleWheel);
     return () => svgContainer.removeEventListener('wheel', handleWheel);
   }, [svgContainer, svgSize]); // 仅依赖必要的静态变量
   

3. 让React驱动视图，避免手动DOM操作
   把viewBox状态直接绑定到SVG的属性上，由React自动处理DOM更新，不要手动调用setAttribute：

   <svg
     ref={svg}
     viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`}
     {/* 其他属性 */}
   >
     {/* SVG内容 */}
   </svg>
   

4. 用useMemo管理scale变量
   如果scale需要参与视图渲染，通过useMemo从viewBox和svgSize计算得出，确保值的同步：

   const scale = useMemo(() => svgSize.w / viewBox.w, [viewBox.w, svgSize.w]);
   

三、是否需要更换监听viewBox状态的方法？ #

不需要更换监听，只需要修正当前的实现逻辑：

• 放弃手动DOM操作，完全由React state驱动SVG的viewBox属性；
• 正确处理事件绑定的生命周期，避免重复绑定；
• 使用函数式状态更新解决闭包问题。

这样就能消除卡顿，同时保证状态和视图的一致性。

内容的提问来源于stack exchange，提问作者Ramazan Erikli