使用React Hooks时ityped打字效果字符重复问题排查

你遇到的重复字母（如DDeevveellooppeerr）是因为ityped初始化被执行了多次，多个打字实例同时在同一个元素上运行，导致字母叠加显示。以下是具体的解决方法：

1. 初始化前清理旧实例 #

ityped提供了destroy方法用于销毁已存在的打字实例，在每次调用init前先清理，同时在组件卸载时也清理实例，避免内存泄漏：

import { init, destroy } from 'ityped';

const textRef = useRef();

useEffect(() => {
  if (textRef.current) {
    // 销毁已有实例，防止重复初始化
    destroy(textRef.current);
    init(textRef.current, {
      showCursor: false,
      backDelay: 1000,
      backSpeed: 60,
      strings: ['Developer'], 
    });
  }

  // 组件卸载时清理实例
  return () => {
    textRef.current && destroy(textRef.current);
  };
}, []);

2. 排查组件重复渲染问题 #

如果上述方法无效，检查包含这段代码的组件是否存在不必要的重渲染：

• 用React.memo包裹组件，避免父组件重渲染导致子组件重复执行useEffect
• 检查组件的props是否稳定，避免传递频繁变化的对象/数组（可以用useMemo缓存）

3. 临时排查严格模式影响（开发环境） #

React开发环境的严格模式会让useEffect执行两次，这可能是重复初始化的原因。可以临时移除index.js中的<StrictMode>标签验证，但不建议长期关闭，优先用方法1解决。

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