如何在React中复现Dribbble上的AI助理交互效果？

• 第一步：抽离核心绘制逻辑
  把你从作品评论区拿到的原生Canvas实现代码单独剥离，移除和浏览器全局强绑定的冗余代码，保留粒子初始化、逐帧绘制、效果销毁三个核心函数，存为独立的工具文件aiAssistantEffect.js。
• 第二步：创建React专用Canvas组件
  新建函数组件文件AiAssistantCanvas.jsx，用useRef钩子分别存储canvas DOM实例、动画帧ID两个引用，避免重渲染时丢失实例。示例基础结构：

  import { useRef, useEffect } from 'react';
  import { initCanvas, drawFrame, clearEffect } from './aiAssistantEffect';
  
  const AiAssistantCanvas = () => {
    const canvasRef = useRef(null);
    const animationRef = useRef(null);
  
    // 后续生命周期逻辑写在这里
  
    return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
  };
  
  export default AiAssistantCanvas;
  

• 第三步：挂载阶段初始化效果
  用useEffect处理组件挂载逻辑：获取canvas 2D上下文，根据父容器尺寸设置canvas实际宽高，记得乘以设备像素比dpr避免绘制内容模糊，调用initCanvas传入上下文和配置参数初始化粒子系统，再通过requestAnimationFrame递归调用drawFrame执行逐帧渲染，把返回的动画帧ID存入animationRef。
• 第四步：适配交互逻辑
  如果原效果包含鼠标移动、点击等交互，直接给canvas元素绑定React合成事件（onMouseMove/onClick等），把获取到的坐标传入绘制逻辑，更新粒子运动参数即可。
• 第五步：销毁阶段清理资源
  在useEffect的返回函数中做清理操作：调用cancelAnimationFrame停止动画，执行clearEffect清空粒子缓存和事件监听，避免内存泄漏。如果需要适配响应式，可以额外绑定窗口resize事件，尺寸变化时重新初始化画布和粒子系统。
• 第六步：业务页面引入使用
  在你需要展示效果的页面引入组件，外层套定位容器控制效果的尺寸和位置即可：

  <div style={{ position: 'relative', width: '400px', height: '400px' }}>
    <AiAssistantCanvas />
  </div>
  

常见问题注意点 #

• React18+严格模式下开发环境useEffect会执行两次，初始化前先调用一次clearEffect避免重复生成粒子
• 可以自行调整工具文件里的粒子数量、运动速度、颜色等参数，平衡视觉效果和运行性能
• 原实现如果有全局样式，建议改成CSS Modules或者组件内联样式，避免和项目现有样式冲突

内容的提问来源于stack exchange，提问作者Vinícius Araújo