反应标签延迟加载

Question

我是 jquery 的 React 初学者。假设我有三个标签。我正在寻找一种延迟加载 3 个选项卡内容的方法，以便当我第一次单击 Tab1 时，只会加载 tab1 内容并保留在 DOM 中（而不是 tab2 和 tab3 内容）。当我单击 Tab2 时，将加载 tab2 内容（而不是 tab3 内容）。当我再次单击 Tab1 时，原始 tab1 内容将保留在 DOM 中，而无需重新加载和重新呈现。

这是代码：

<div className="tab-content">
  {/* Tab1 */}
  <div hidden={tab1.name !== activeTab ? true : false}>
    <tab1.component />
  </div>
  {/* Tab2 */}
  <div hidden={tab2.name !== activeTab ? true : false}>
    <tab2.component />
  </div>
  {/* Tab3 */}
  <div hidden={tab3.name !== activeTab ? true : false}>
    <tab3.component />
  </div>
</div>

它可以工作，但问题是所有三个组件（tab1.component、tab2.component & tab3.component）同时加载，即使用户从未单击tab2或tab3，导致服务器中的浪费处理。

tab2 和 tab3 中的内容都需要在服务器上进行“昂贵”的处理，这就是我想避免这种情况的原因。

谢谢你。

Answer 1

你可以有一个像这样的包装组件：

type LazyProps = {
    visible: boolean;
}

function Lazy({visible, children}: PropsWithChildren<LazyProps>) {
    const rendered = useRef(visible);

    if (visible && !rendered.current) {
        rendered.current = true;
    }

    if (!rendered.current)
        return null;

    return <div style={{display: visible ? 'block' : 'none'}}>{children}</div>;
}

并像这样使用它：

<div className="tab-content">
    <Lazy visible={tab1.name === activeTab}><tab1.component /></Lazy>
    <Lazy visible={tab2.name === activeTab}><tab2.component /></Lazy>
    <Lazy visible={tab3.name === activeTab}><tab3.component /></Lazy>
</div>

这个想法是避免渲染选项卡内容，直到visibleprop 成为true第一次。之后该visibleprop 只会影响displaycss 规则，因此选项卡的状态会被保留。