React Tabs 惰性加载

Question

我是一名从jquery转到React的初学者。假设我有三个选项卡。我正在寻找一种方法来延迟加载3个选项卡的内容，以便当我第一次单击Tab1时，仅加载并停留在DOM中的是Tab1的内容（而不是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>

它可以工作，但问题在于即使用户从未点击tab2或tab3，所有三个组件（tab1.component，tab2.component和tab3.component）也会同时加载，导致服务器上的处理浪费。

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

谢谢。

- brian

---

检查每个tab.component的props。如果在切换选项卡时更改了某些props或state，则组件将重新渲染。 - Angelki

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>

这个想法是在visible属性第一次变为true之前避免渲染标签内容。之后，visible属性只影响display CSS规则，因此标签的状态得以保留。

- Alexander Kravets

---

谢谢，这个确实适合我的使用情况，我只想在标签页聚焦时避免不必要的渲染。 - Bhushan Patil