将原生JavaScript动画效果转换为React组件的最佳实践

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;

document.querySelector("h1").onmouseover = event => {
  let iteration = 0;
  clearInterval(interval);

  interval = setInterval(() => {
    event.target.innerText = event.target.innerText
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return event.target.dataset.value[index];
        }
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");

    if(iteration >= event.target.dataset.value.length){
      clearInterval(interval);
    }
    iteration += 1 / 3;
  }, 30);
}

import React, { useState, useEffect } from 'react';

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

const TextAnimation = ({ initialText }) => { // 接收初始文本作为props
  const [displayText, setDisplayText] = useState(initialText); // 管理当前显示的文本
  // ... 其他代码
};

import React, { useState, useEffect, useRef } from 'react'; // 引入useRef用于更React化的DOM访问

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

const TextAnimation = ({ initialText }) => {
  const [displayText, setDisplayText] = useState(initialText);
  const h1Ref = useRef(null); // 使用useRef获取h1元素

  useEffect(() => {
    let interval = null; // 局部变量，确保每次effect执行都有独立的interval

    const handleMouseOver = () => {
      let iteration = 0;
      clearInterval(interval); // 清除上一个可能存在的定时器

      interval = setInterval(() => {
        setDisplayText(prevText => { // 使用函数式更新确保获取最新状态
          return initialText // 使用props中的initialText作为原始值
            .split("")
            .map((char, index) => {
              if (index < iteration) {
                return initialText[index]; // 恢复原始字符
              }
              return letters[Math.floor(Math.random() * 26)]; // 随机字符
            })
            .join("");
        });

        if (iteration >= initialText.length) { // 动画结束条件
          clearInterval(interval);
        }
        iteration += 1 / 3;
      }, 30);
    };

    // 绑定事件监听器
    const currentH1 = h1Ref.current;
    if (currentH1) {
      currentH1.addEventListener("mouseover", handleMouseOver);
    }

    // 清理函数：组件卸载或effect重新执行前调用
    return () => {
      if (currentH1) {
        currentH1.removeEventListener("mouseover", handleMouseOver);
      }
      clearInterval(interval);
    };
  }, [initialText]); // 依赖项：当initialText变化时，重新设置effect

  return (
    <h1 ref={h1Ref}>
      {displayText}
    </h1>
  );
};

export default TextAnimation;

// ... (代码同上)
  return (
    <h1 ref={h1Ref}>
      {displayText}
    </h1>
  );
};

import React, { useState, useEffect, useRef } from 'react';

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

const TextAnimation = ({ initialText }) => {
  const [displayText, setDisplayText] = useState(initialText);
  const h1Ref = useRef(null); // 使用useRef获取DOM元素引用

  useEffect(() => {
    let interval = null; // 声明一个局部变量来存储定时器ID

    const handleMouseOver = () => {
      let iteration = 0;
      clearInterval(interval); // 清除任何之前存在的定时器

      interval = setInterval(() => {
        setDisplayText(prevText => {
          // 根据迭代进度，决定显示原始字符还是随机字符
          return initialText // 使用props中的initialText作为原始值
            .split("")
            .map((char, index) => {
              if (index < iteration) {
                return initialText[index]; // 恢复原始字符
              }
              return letters[Math.floor(Math.random() * 26)]; // 显示随机字符
            })
            .join("");
        });

        // 当所有字符都恢复到原始状态时，停止动画
        if (iteration >= initialText.length) {
          clearInterval(interval);
        }
        iteration += 1 / 3; // 控制动画速度和字符恢复进度
      }, 30);
    };

    // 将事件监听器绑定到DOM元素
    const currentH1Element = h1Ref.current;
    if (currentH1Element) {
      currentH1Element.addEventListener("mouseover", handleMouseOver);
    }

    // 清理函数：在组件卸载或依赖项改变时执行
    return () => {
      if (currentH1Element) {
        currentH1Element.removeEventListener("mouseover", handleMouseOver);
      }
      clearInterval(interval); // 清除定时器以避免内存泄漏
    };
  }, [initialText]); // 依赖项数组，当initialText变化时重新运行effect

  return (
    <div>
      <h1 ref={h1Ref} style={{ fontSize: '3em', cursor: 'pointer' }}>
        {displayText}
      </h1>
      <p style={{ marginTop: '20px', color: '#888' }}>
        将鼠标悬停在上方文字上，查看效果。
      </p>
    </div>
  );
};

// 示例用法
const App = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column' }}>
      <TextAnimation initialText="HELLO WORLD" />
    </div>
  );
};

export default App;