React中实现鼠标悬停文本乱码渐变效果：从原生JS到组件化实践

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

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

const TextScramble = ({ children }) => {
  // useRef用于获取h1元素的DOM引用
  const h1Ref = useRef(null);
  // useState管理当前显示的文本，初始值为空
  const [displayedText, setDisplayedText] = useState('');
  // useState管理目标文本，从data-value获取
  const [targetText, setTargetText] = useState('');

  // ... 动画逻辑将在这里实现
};

export default TextScramble;

// ... (之前的导入和常量定义)

const TextScramble = ({ children }) => {
  const h1Ref = useRef(null);
  const [displayedText, setDisplayedText] = useState('');
  const [targetText, setTargetText] = useState(''); // 存储最终目标文本

  // 使用useEffect在组件挂载后获取data-value并初始化displayedText
  useEffect(() => {
    if (h1Ref.current) {
      // 从data-value属性获取目标文本
      const initialTargetText = h1Ref.current.dataset.value || children?.toString() || '';
      setTargetText(initialTargetText);
      // 初始显示文本可以是目标文本，或者随机字符，取决于效果需求。
      // 这里我们初始化为目标文本，等待鼠标悬停触发乱码。
      setDisplayedText(initialTargetText); 
    }
  }, [children]); // 依赖children，如果children变化则重新初始化

  // ... (动画逻辑)

  return (
    <h1 ref={h1Ref} data-value={targetText}>
      {displayedText}
    </h1>
  );
};

export default TextScramble;

// ... (之前的代码)

const TextScramble = ({ children }) => {
  const h1Ref = useRef(null);
  const [displayedText, setDisplayedText] = useState('');
  const [targetText, setTargetText] = useState('');
  let intervalRef = useRef(null); // 使用ref来持有interval ID，避免闭包问题

  useEffect(() => {
    if (h1Ref.current) {
      const initialTargetText = h1Ref.current.dataset.value || children?.toString() || '';
      setTargetText(initialTargetText);
      setDisplayedText(initialTargetText);
    }
  }, [children]);

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

    // 清除任何现有的定时器
    clearInterval(intervalRef.current);

    intervalRef.current = setInterval(() => {
      setDisplayedText(prevText => {
        // 根据迭代次数，部分显示目标文本，部分显示随机字符
        return targetText
          .split("")
          .map((letter, index) => {
            if (index < iteration) {
              return targetText[index]; // 显示目标文本的对应字符
            }
            // 否则显示随机字符
            return letters[Math.floor(Math.random() * 26)];
          })
          .join("");
      });

      // 当所有字符都已“解密”时，清除定时器
      if (iteration >= targetText.length) {
        clearInterval(intervalRef.current);
      }

      // 迭代速度控制
      iteration += 1 / 3;
    }, 30); // 每30毫秒更新一次
  };

  // 使用useEffect管理事件监听器和清理
  useEffect(() => {
    const currentH1 = h1Ref.current;
    if (currentH1 && targetText) { // 确保h1存在且targetText已初始化
      currentH1.addEventListener("mouseover", handleMouseOver);
    }

    // 清理函数：在组件卸载或依赖项变化时执行
    return () => {
      if (currentH1) {
        currentH1.removeEventListener("mouseover", handleMouseOver);
      }
      clearInterval(intervalRef.current); // 清除定时器
    };
  }, [targetText]); // 依赖targetText，当目标文本变化时，重新绑定事件

  return (
    <h1 ref={h1Ref} data-value={targetText}>
      {displayedText}
    </h1>
  );
};

export default TextScramble;

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

// 定义所有可能用于乱码的字符
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

/**
 * TextScramble 组件
 * 实现了鼠标悬停时文本乱码渐变显示原始文本的效果。
 * 原始文本通过 data-value 属性或 children prop 提供。
 */
const TextScramble = ({ children }) => {
  // useRef 用于