Vanilla JS字符Scramble代码迁移React遇无限循环，求useState用法

为啥会无限循环？ #

你的React代码陷循环，基本是因为在组件渲染的时候直接调用了状态更新函数（比如setDisplayText写在组件函数体里）——每次状态变了组件就重新渲染，一渲染又触发状态更新，来回往复就炸了。原Vanilla JS是直接操作DOM加定时器，React得用useEffect管理定时器的生命周期，不能瞎触发状态更新。

先理清楚原JS的核心逻辑 #

这类效果的本质就是：

• 先生成和目标文本长度一致的随机特殊字符
• 每隔一小段时间，把当前位置的随机字符换成目标字符，换之前先闪几下随机字符
• 所有字符都替换完就停掉定时器

正确的React写法 #

用useState存状态，useEffect管定时器，避免循环：

import { useState, useEffect } from 'react';

const TextReveal = () => {
  const targetText = "Hello React!";
  const chars = "!@#$%^&*()_+-=[]{}|;:,.<>?~";
  const [displayText, setDisplayText] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);

  // 处理字符替换的定时器逻辑
  useEffect(() => {
    if (currentIndex >= targetText.length) return;

    const interval = setInterval(() => {
      // 先显示随机字符
      const randomChar = chars[Math.floor(Math.random() * chars.length)];
      const tempText = displayText.slice(0, currentIndex) + randomChar + displayText.slice(currentIndex + 1);
      setDisplayText(tempText);

      // 100ms后换成目标字符，推进索引
      setTimeout(() => {
        const updatedText = displayText.slice(0, currentIndex) + targetText[currentIndex] + displayText.slice(currentIndex + 1);
        setDisplayText(updatedText);
        setCurrentIndex(prev => prev + 1);
      }, 100);
    }, 120);

    // 组件卸载或者索引变了就清定时器
    return () => clearInterval(interval);
  }, [currentIndex, displayText, targetText, chars]);

  // 初始化：先填充和目标文本一样长的随机字符
  useEffect(() => {
    if (!displayText) {
      let initialStr = "";
      for (let i = 0; i < targetText.length; i++) {
        initialStr += chars[Math.floor(Math.random() * chars.length)];
      }
      setDisplayText(initialStr);
    }
  }, [displayText, targetText, chars]);

  return <div>{displayText}</div>;
};

export default TextReveal;

关键细节 #

• 用useEffect包裹定时器：把定时器逻辑放在useEffect里，依赖项设成currentIndex这些变量，只有当索引变化时才重新创建定时器，不会无意义触发。
• 拆分状态：把当前替换的索引单独存成状态，用它控制替换进度，别直接在渲染阶段修改文本状态。
• 清理定时器：useEffect返回的函数里一定要清除定时器，不然组件卸载后定时器还在运行，不仅占内存还可能触发无效的状态更新。
• 函数式更新：更新索引时用setCurrentIndex(prev => prev + 1)，确保拿到的是最新的索引值，避免状态滞后问题。

避坑提醒 #

• 绝对别在组件函数体里直接调用setState，一渲染就触发更新，必触发无限循环。
• useEffect的依赖项要写全，漏了会导致逻辑不更新；多了会触发不必要的重渲染，按需调整即可。
• 如果需要连续修改状态，优先使用函数式更新，避免状态值滞后的问题。

内容的提问来源于stack exchange，提问作者rodrigo de jesus silva