如何在React中按特定时间间隔依次渲染列表项

嘿，作为React新手想要实现列表项逐次渲染（每10秒出一个）的效果其实挺简单的，我给你分享两种实用的方案，你可以根据自己的场景来选：

方案一：用 useState + 递归 setTimeout（推荐，避免定时器累积问题） #

这种方式通过跟踪当前渲染到的索引，每次定时器触发后更新索引，逐步渲染列表项，而且不会出现setInterval可能导致的间隔不准问题：

import { useState, useEffect } from 'react';

function SequentialList() {
  // 假设这是你的原始列表数据
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  // currentIndex 记录当前已经渲染到第几个项
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    // 如果已经渲染完所有项，就停止定时器
    if (currentIndex >= items.length) return;

    // 10秒后更新索引，渲染下一个项
    const timerId = setTimeout(() => {
      setCurrentIndex(prevIndex => prevIndex + 1);
    }, 10000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(timerId);
  }, [currentIndex]); // 每次currentIndex变化时重新触发effect

  return (
    <ul>
      {/* 只渲染从0到currentIndex的项 */}
      {items.slice(0, currentIndex + 1).map((item, idx) => (
        <li key={idx}>{item}</li>
      ))}
    </ul>
  );
}

export default SequentialList;

方案二：用 useState + setInterval #

如果你更习惯用setInterval，也可以这么写，但要注意在所有项渲染完成后及时清除定时器：

import { useState, useEffect } from 'react';

function SequentialList() {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  // renderedItems 存储已经渲染的项
  const [renderedItems, setRenderedItems] = useState([]);

  useEffect(() => {
    let currentItemIndex = 0;
    // 启动10秒间隔的定时器
    const intervalId = setInterval(() => {
      if (currentItemIndex < items.length) {
        // 把下一个项添加到已渲染列表中
        setRenderedItems(prevItems => [...prevItems, items[currentItemIndex]]);
        currentItemIndex++;
      } else {
        // 所有项渲染完，清除定时器
        clearInterval(intervalId);
      }
    }, 10000);

    // 组件卸载时清理定时器
    return () => clearInterval(intervalId);
  }, []);

  return (
    <ul>
      {renderedItems.map((item, idx) => (
        <li key={idx}>{item}</li>
      ))}
    </ul>
  );
}

export default SequentialList;

新手注意点 #

• Key的使用：上面的例子用了索引作为key，但如果你的列表项有唯一标识（比如id），最好用那个作为key，避免列表更新时出现不必要的重渲染问题。
• 清理定时器：一定要在组件卸载时清除定时器，否则会导致内存泄漏，甚至在组件卸载后还执行状态更新，引发报错。
• 动态列表适配：如果你的列表数据是通过props传入的动态数据，记得把items加入到useEffect的依赖数组中，并且在items变化时重置渲染状态（比如把currentIndex设回0）。

这两种方案都能轻松实现你要的效果，你可以根据自己的代码习惯来选择～

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