存储在内存中并“冻结”选项卡系统中的React组件

Question

我正在尝试创建一个选项卡系统。这是代码的简化版本：

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 组件存储在内存中的常见和最佳实践是什么？

理想情况下，测试组件（或将放入该系统的任何组件）不应该知道它们是否处于活动状态，或者它们是否位于选项卡系统中。它们应该只是常规组件。

感谢您的阅读！

Answer 1

安装

Test组件后，默认值会在useState钩子中设置。为了让它“记住”卸载后的值，你需要把这个状态提升得更高，你可以把它放在父组件 - App 中。之后，使用道具，您将能够将必要的数据放入您需要的组件中。

为了更方便地处理数据，您可以使用各种状态管理器 - 例如，

redux或mox。