修复react-simple-typewriter更新导致tsParticles重复重载问题

粒子反复重载和渲染模式无关，核心是React重渲染逻辑导致的：useTypewriter每次更新打字文本时会触发Home组件重渲染，Background组件默认跟着父组件一起重渲染，而组件内部定义的particlesInit、particlesLoaded函数、options配置对象每次渲染都会生成新的内存引用，react-tsparticles检测到props引用变化就会销毁旧实例重新初始化，最终出现动效异常刷新的问题。

• 切换为canvas非window模式解决不了问题：fullScreen配置只是控制粒子是挂载到全局全屏容器，还是挂载到组件内部的普通canvas容器，和重渲染触发的实例重载逻辑完全无关，修改这个配置只能调整布局，解决不了动效刷新问题。
• 有非常成熟的现成修复方案，都是React性能优化的标准操作，不需要魔改第三方库源码。
• 不需要更换现有依赖库，tsParticles和react-simple-typewriter本身没有兼容问题，异常来自组件写法未做必要的性能优化。

1. 给Background组件加React.memo缓存，Background本身不依赖父组件的打字文本状态，不需要跟着Home组件每次打字动作重渲染。
2. 把传给Particles组件的初始化回调、加载完成回调、粒子配置全部移到组件作用域外部，静态场景下不需要每次渲染重新创建；如果后续需要动态配置，再用useCallback/useMemo做引用缓存，保证传给Particles的props引用稳定，不会被判定为参数变更触发重载。

修复后的Background.js代码如下：

import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { memo } from "react";

// 粒子配置移到组件外，全局仅初始化一次，不会随重渲染生成新引用
const PARTICLES_OPTIONS = {
  "fullScreen": {
    "enable": true,
    "zIndex": 1
  },
  "fpsLimit": 120,
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ff0000",
      "animation": {
        "enable": true,
        "speed": 20,
        "sync": true
      }
    },
    "opacity": {
      "value": 0.5
    },
    "size": {
      "value": {
        "min": 0.1,
        "max": 3
      }
    },
    "links": {
      "enable": true,
      "distance": 100,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "outModes": {
        "default": "out"
      }
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      },
      "onClick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "repulse": {
        "distance": 200
      },
      "push": {
        "quantity": 4
      }
    }
  },
  "detectRetina": true,
  "background": {
    "color": "#000000"
  }
};

// 初始化回调移到组件外，保证引用稳定
const particlesInit = async (main) => {
  await loadFull(main);
};

// 加载完成回调移到组件外，保证引用稳定
const particlesLoaded = (container) => {};

// 用memo包裹组件，仅props实际变化时才触发重渲染
const Background = memo(() => {
  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={PARTICLES_OPTIONS}
    />
  );
});

export default Background;

修改完成后，打字机更新文本触发Home组件重渲染时，Background组件因为memo缓存+props引用无变化，不会跟着重渲染，tsParticles实例只会在页面首次加载时初始化一次，动效不会再出现异常刷新。

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