我正在尝试创建一个制表系统。下面是代码的简化版本：

import { useState, useEffect } from "react";

function Test({ id }) {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <h1>{text}</h1>
    </div>
  );
}

function App() {
  const [active, setActive] = useState(0);

  const [components, setCompoents] = useState([
    <Test key="1" id="1" />,
    <Test key="2" id="2" />,
    <Test key="3" id="3" />,
  ]);

  const handleActiiveChange = () => {
    setActive((active + 1) % components.length);
  };

  return (
    <div>
      <button onClick={handleActiiveChange}>Switch Tab</button>
      change: {active.toString()}
      <div>{components[active]}</div>
    </div>
  );
}

export default App;

字符串
在最终版本中，新的选项卡将动态添加到components。虽然当前的代码可以“工作”，但组件（Test）并没有像我希望的那样保留状态。目标是每当呈现选项卡时，它都会保持其先前的状态（例如：如果我在里面输入了一些东西，然后我循环回到我输入的标签，它不应该丢失。
在内存中“冻结”或存储react组件的常见和最佳实践是什么？
理想情况下，Test组件（或任何将被放入该系统的组件）不应该知道它们是否处于活动状态，或者它们是否处于选项卡系统中。它们应该只是常规组件。
感谢您的阅读！