React TS中window.webkitRequestAnimationFrame报错问题咨询

核心问题拆解 #

1. TypeScript类型报错原因：TypeScript默认的Window接口定义里，没有webkitRequestAnimationFrame和mozRequestAnimationFrame这些带前缀的属性，直接访问会触发类型检查错误。
2. 前缀API的必要性：目前主流浏览器（Chrome、Firefox、Edge等）早已全面支持标准的requestAnimationFrame，前缀版本属于废弃的兼容写法，完全没必要再用。
3. 你的代码还有其他问题：比如Props定义错误、直接修改props、组件每次渲染都会重复启动动画循环等，这些也需要一并修正。

解决方案与修正代码 #

1. 直接用标准requestAnimationFrame #

现代浏览器都支持标准API，完全可以抛弃前缀版本。如果非要兼容极旧浏览器（比如IE9及以下），可以用类型断言绕开TypeScript检查，但不推荐这种做法。

2. 修正React+TS的规范问题 #

以下是修正后的完整代码，解决了类型报错、组件生命周期管理、状态维护等问题：

import React, { useEffect, useRef } from "react";

// 明确粒子的类型结构
interface Particle {
  x: number;
  y: number;
  angle: number;
  size: number;
  life: number;
}

function App() {
  // 用ref保存canvas实例、粒子数组、动画ID和时间戳，避免组件重渲染丢失状态
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particlesRef = useRef<Particle[]>([]);
  const animationIdRef = useRef<number | null>(null);
  const lastTimeRef = useRef<number>(Date.now());

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // 鼠标按下生成粒子
    const handleMouseDown = (e: MouseEvent) => {
      for (let i = 0; i < 36 * 2; i++) {
        particlesRef.current.push({
          x: e.clientX,
          y: e.clientY,
          angle: i * 5,
          size: 5 + Math.random() * 3,
          life: 200 + Math.random() * 50,
        });
      }
    };
    canvas.addEventListener("mousedown", handleMouseDown);

    // 更新粒子状态
    const animate = () => {
      const now = Date.now();
      const delta = now - lastTimeRef.current;
      lastTimeRef.current = now;

      // 倒序遍历避免splice导致的索引错乱
      for (let i = particlesRef.current.length - 1; i >= 0; i--) {
        const p = particlesRef.current[i];
        p.x += Math.cos(p.angle) * 4 + Math.random() * 2 - Math.random() * 2;
        p.y += Math.sin(p.angle) * 4 + Math.random() * 2 - Math.random() * 2;
        p.life -= delta;
        p.size -= delta / 50;

        if (p.size <= 0 || p.life <= 0) {
          particlesRef.current.splice(i, 1);
        }
      }
    };

    // 渲染粒子
    const render = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#00FF00";
      for (const p of particlesRef.current) {
        if (Math.random() < 0.1) continue;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2, false);
        ctx.fill();
      }
    };

    // 动画循环
    const animLoop = () => {
      animate();
      render();
      animationIdRef.current = requestAnimationFrame(animLoop);
    };

    // 启动动画
    animationIdRef.current = requestAnimationFrame(animLoop);

    // 组件卸载时清理事件和动画，避免内存泄漏
    return () => {
      canvas.removeEventListener("mousedown", handleMouseDown);
      if (animationIdRef.current) {
        cancelAnimationFrame(animationIdRef.current);
      }
    };
  }, []);

  return <canvas ref={canvasRef} width={window.innerWidth} height={window.innerHeight} />;
}

export default App;

关键修正点说明 #

• 类型规范：新增Particle接口明确粒子结构，删除了原Props里错误的定义（原Props把particles定义为number，还错误地通过props传入canvas）。
• React Hooks使用：用useRef保存可变状态，避免组件重渲染丢失数据；用useEffect管理事件监听和动画循环，确保组件挂载时启动、卸载时清理。
• 动画优化：使用标准requestAnimationFrame，并在组件卸载时调用cancelAnimationFrame防止内存泄漏；倒序遍历粒子数组解决splice导致的索引问题。
• 画布处理：每次渲染前清空画布，解决粒子残留的问题。

极端兼容场景补充 #

如果确实要兼容非常老旧的浏览器，可以用类型断言绕开TypeScript的类型检查，示例：

const requestAnimFrame = (
  window.requestAnimationFrame ||
  (window as any).webkitRequestAnimationFrame ||
  (window as any).mozRequestAnimationFrame ||
  ((callback: FrameRequestCallback) => setTimeout(callback, 1000 / 60))
);

但这种场景现在几乎不存在，优先推荐使用标准API。

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