防止条件中的映射组件重新加载？

Question

我有一个有两个选项卡/按钮“最近”和“顶部”的屏幕。在两者之间切换时，单个项目总是重新加载数据，这是不必要的，并导致移动。我还没能用useMemo或其他类似的方法解决这个问题。

如何使组件在选项卡之间切换时不再加载其数据：

沙箱中可编辑的示例：码箱

编辑:我意识到我可以使用CSS隐藏非活动选项卡，或者我可以在更高级别加载数据以防止重新加载-但是在组件级别，可以停止数据的重新加载吗？

import * as React from "react";
import "./styles.css";

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

const Item = ({ title }) => {
  const [itemLoading, setItemLoading] = React.useState(true);

  async function loadItem() {
    await delay((Math.random() * (3 - 1) + 1) * 1000);
    setItemLoading(false);
  }

  React.useEffect(() => {
    loadItem();
  }, []);

  if (itemLoading) {
    return (
      <div className="w-full text-center py-4 border bg-white rounded shadow-lg">
        item is loading ...
      </div>
    );
  } else {
    return (
      <div className="w-full text-center py-4 border bg-white rounded shadow-lg">
        item {title}
      </div>
    );
  }
};

export default function App() {
  const [tab, setTab] = React.useState("Recent");
  const recentItems = ["1", "2", "3", "4", "5", "6", "7", "9"];
  const topItems = ["99", "98", "97", "96", "95", "94", "93"];

  return (
    <div className="w-screen h-screen bg-gray-100">
      <h1 className="text-2xl text-center py-4">Current Tab: {tab}</h1>
      <section className="w-full h-24 grid grid-cols-2">
        <div
          className="cursor-pointer text-center bg-red-200 pt-8"
          onClick={() => {
            setTab("Recent");
          }}
        >
          Recent
        </div>
        <div
          className="cursor-pointer text-center bg-yellow-200 pt-8"
          onClick={() => {
            setTab("Top");
          }}
        >
          Top
        </div>
      </section>

      <section>
        {tab === "Recent"
          ? recentItems.map((item) => <Item key={item} title={item} />)
          : topItems.map((item) => <Item key={item} title={item} />)}
      </section>
    </div>
  );
}

Answer 1

每次tab状态发生变化时，都会调用array.map并创建一个新的react组件数组：

{tab === "Recent"
          ? recentItems.map((item) => <Item key={item} title={item} />)
          : topItems.map((item) => <Item key={item} title={item} />)}

每次创建新组件时，您提供的代码都会尝试使用异步调用和ReactDOM重新呈现表来获取数据。如果速度是一个约束，数据获取部分应该从组件中分离出来。

您可以通过将数据状态移动到上面的组件(在您的例子中是App)或将其单独处理到其他地方来实现这一点。建议采用第一种选择。

Answer 2

我解决这一问题而不进一步移动数据加载的方法是将选项卡的高度和宽度设置为0，并将其标记为隐藏(除非它是当前选项卡)。这消除了所有双重加载和累积布局移位，而不修改大量的代码。

(顺风)

const hiddenClass = "w-0 h-0 hidden"

<div className={currentTab === "Recent" ? undefined : hiddenClass} >
...recent items
</div>
<div className={currentTab === "Popular" ? undefined : hiddenClass} >
...popular items
</div>