掌握JavaScript DOM效果到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 // 直接操作DOM
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          // 从data-value中获取目标字符
          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, useRef } from 'react';

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

/**
 * 一个带有文本乱码特效的React组件。
 * 当鼠标悬停在其上时，文本会从随机字符逐渐变为目标文本。
 * @param {object} props - 组件的属性。
 * @param {string} props.targetText - 最终要显示的文本。
 */
const ScrambleTextEffect = ({ targetText }) => {
  // 1. 使用useState管理当前显示的文本状态
  // 初始时，显示完整的目标文本，或者可以设置为随机字符
  const [displayText, setDisplayText] = useState(targetText);

  // 2. 使用useRef获取h1元素的引用，以便添加事件监听器
  const h1Ref = useRef(null);

  // 3. 使用useRef持久化定时器ID，以便在组件生命周期内管理它
  const intervalRef = useRef(null);

  // 4. useEffect处理副作用：事件监听、定时器逻辑和清理
  useEffect(() => {
    // 确保组件挂载或targetText变化时，显示文本初始化为目标文本
    setDisplayText(targetText);

    // 定义鼠标悬停事件处理函数
    const handleMouseOver = () => {
      let iteration = 0;

      // 清除任何现有的定时器，防止重复触发
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }

      // 启动新的定时器
      intervalRef.current = setInterval(() => {
        setDisplayText(prevText => {
          // 将当前显示的文本拆分成字符数组
          return prevText
            .split("")
            .map((_char, index) => { // _char在此处未使用，我们关注索引
              // 如果索引小于迭代次数，则从目标文本中揭示字符
              if (index < iteration) {
                return targetText[index]; // 修正：从targetText中获取字符
              }
              // 否则，显示一个随机字符
              return letters[Math.floor(Math.random() * 26)];
            })
            .join(""); // 重新组合成字符串
        });

        // 当所有字符都被揭示后，清除定时器
        if (iteration >= targetText.length) {
          clearInterval(intervalRef.current);
          intervalRef.current = null; // 重置ref
          // 确保最终显示的文本就是目标文本
          setDisplayText(targetText);
        }

        iteration += 1 / 3; // 每次迭代增加1/3，控制字符揭示速度
      }, 30); // 每30毫秒执行一次
    };

    // 挂载时，为h1元素添加mouseover事件监听器
    // 确保h1Ref.current存在，即元素已渲染
    if (h1Ref.current) {
      h1Ref.current.addEventListener("mouseover", handleMouseOver);
    }

    // 清理函数：组件卸载或依赖项变化时执行
    return () =>