时间戳

首页 > 解决方案 > 如何在基于时间的间隔内将 React 元素添加到组件而不导致重新渲染？

javascript - 如何在基于时间的间隔内将 React 元素添加到组件而不导致重新渲染？

问题描述

我不确定 React JS 是否可以做到这一点，但有办法吗？

setInterval(() => {
        ReactDOM.render(
            <h1 id = {count}>{count}</h1>,
            document.getElementById("drop")
        );
        count = count + 1;
    }, 1000);

这是我到目前为止的代码，但它不起作用，因为它只是替换了 . 目标是每两秒钟，React 将从字符串数组中选择一个单词，并使其从页面顶部落到底部 [使用 React-Spring]。因此，创建一个新的 React 元素并每两秒将其添加到 React 组件中。

标签： javascriptreactjsweb

解决方案

这是代码，然后是我对您应该如何思考做出反应的解释。

const MyComponent = () => {
  const words = [
    "this",
    "is",
    "an",
    "example",
    "of",
    "an",
    "array",
    "of",
    "strings",
  ];
  const [activeWordIndex, setActiveWordIndex] = useState(0);
  const timeout = 2000;

  useEffect(() => {
    setTimeout(() => {
      setActiveWordIndex(activeWordIndex + 1);
    }, timeout);
  }, [activeWordIndex]);

  const activeWord = words[activeWordIndex];
  // TODO with your react-spring
  return <h5>{activeWord}</h5>;
};

一些注意事项：

  • 我没有处理案例索引超出数组长度的情况，您可以自己处理。我只是想给出这个概念
  • 您可以复制并粘贴上面的代码并运行以查看activeWord显示。

这是您在 reactJs 中应该思考的方式：

  • 没有创建一个新元素，你应该像我的数组一样从一开始就有一个words数组。在实际应用中，这个数组通常是从 API 中获取的。
  • 您应该必须在activeWordIndex上面的“反应状态”中保留一个“活动”项目，并setActiveWordIndex在需要时使用它来设置它的值。

推荐阅读