React组件内如何为文本添加渲染延迟？

要实现每个段落按不同延迟时间渲染，核心思路是用React状态控制每个段落的显示时机，结合setTimeout和useEffect触发状态更新，具体实现如下：

完整代码 #

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

function Home() {
  // 用数组存储四个段落的显示状态，初始都为false（不显示）
  const [showParagraphs, setShowParagraphs] = useState([false, false, false, false]);
  // 定义每个段落对应的延迟秒数
  const delayTimes = [2, 4, 6, 8];

  useEffect(() => {
    const timers = [];
    
    delayTimes.forEach((seconds, index) => {
      // 为每个段落设置定时器，到时间后切换对应显示状态
      const timer = setTimeout(() => {
        setShowParagraphs(prevState => {
          // 复制原状态数组，避免直接修改状态
          const updatedState = [...prevState];
          updatedState[index] = true;
          return updatedState;
        });
      }, seconds * 1000);
      
      timers.push(timer);
    });

    // 组件卸载时清除所有定时器，防止内存泄漏
    return () => timers.forEach(timer => clearTimeout(timer));
  }, []);

  return (
    <div>
      {showParagraphs[0] && <p>Render after 2 seconds</p><br />}
      {showParagraphs[1] && <p>Render after 4 seconds</p><br />}
      {showParagraphs[2] && <p>Render after 6 seconds</p><br />}
      {showParagraphs[3] && <p>Render after 8 seconds</p>}
    </div>
  );
};

export default Home;

关键逻辑说明 #

• 状态管理：用useState创建数组showParagraphs，每个元素对应一个段落的显示状态，初始都为false。
• 定时器设置：在useEffect中遍历延迟时间数组，为每个段落创建定时器，延迟时间转换为毫秒后传入setTimeout。
• 状态更新：更新状态时通过复制原数组并修改对应索引的元素，保证状态更新的不可变性。
• 清理定时器：useEffect的返回函数会在组件卸载时清除所有定时器，避免内存泄漏问题。

如果需要复用延迟渲染的逻辑，也可以把单个延迟段落封装成独立组件，比如：

const DelayedParagraph = ({ delay, children }) => {
  const [show, setShow] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => setShow(true), delay * 1000);
    return () => clearTimeout(timer);
  }, [delay]);
  
  return show ? <>{children}</> : null;
};

// 在Home组件中使用
function Home() {
  return (
    <div>
      <DelayedParagraph delay={2}><p>Render after 2 seconds</p><br /></DelayedParagraph>
      <DelayedParagraph delay={4}><p>Render after 4 seconds</p><br /></DelayedParagraph>
      <DelayedParagraph delay={6}><p>Render after 6 seconds</p><br /></DelayedParagraph>
      <DelayedParagraph delay={8}><p>Render after 8 seconds</p></DelayedParagraph>
    </div>
  );
}

这种方式更灵活，后续需要新增延迟渲染的元素时，直接复用DelayedParagraph组件即可。

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