如何将Codepen中的JavaScript代码转换为React应用可用代码？

原代码是原生JavaScript的DOM操作逻辑，直接放到React里无效，因为React是状态驱动的，直接操作DOM会被虚拟DOM覆盖，且全局变量容易引发问题。下面是适配React的实现方案：

函数组件实现（推荐） #

使用React Hooks管理状态、定时器和事件逻辑，完全符合React的开发范式：

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

// 可复用的字符切换组件
const RandomTextHover = ({ targetText }) => {
  const [displayText, setDisplayText] = useState(targetText);
  const intervalRef = useRef(null);
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  const handleMouseOver = useCallback(() => {
    let iteration = 0;
    // 清除之前的定时器
    clearInterval(intervalRef.current);

    intervalRef.current = setInterval(() => {
      setDisplayText(prevText => {
        const updatedText = prevText.split('').map((_, index) => {
          // 已完成切换的部分显示目标文本，未完成的显示随机字母
          return index < iteration ? targetText[index] : letters[Math.floor(Math.random() * 26)];
        }).join('');

        // 切换完成后清除定时器，恢复目标文本
        if (iteration >= targetText.length) {
          clearInterval(intervalRef.current);
          return targetText;
        }

        iteration += 1 / 3;
        return updatedText;
      });
    }, 30);
  }, [targetText]);

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => clearInterval(intervalRef.current);
  }, []);

  return <h1 onMouseOver={handleMouseOver}>{displayText}</h1>;
};

// 组件使用示例
const App = () => {
  return <RandomTextHover targetText="YOUR TARGET TEXT" />;
};

export default App;

关键改动说明 #

• 用useState管理显示文本：React通过状态更新触发DOM渲染，替代原生的innerText直接操作
• 用useRef存储定时器ID：避免全局变量污染，确保每个组件实例拥有独立的定时器
• 用useCallback缓存事件函数：防止组件重渲染时频繁创建新函数，优化性能
• 用useEffect清理副作用：组件卸载时自动清除定时器，避免内存泄漏

为什么原生代码直接用不行？ #

1. React的虚拟DOM会覆盖你直接修改的DOM内容，导致效果失效
2. 全局interval变量在多组件实例场景下会互相干扰
3. 原生DOM操作不符合React的状态驱动开发模式，容易引发不可预测的BUG

内容的提问来源于stack exchange，提问作者Winter Soldier