您是希望先进行多个异步查询，然后将其传递给子组件，还是将它们拆分？

Question

这更多是一个开放式问题，但是我想知道解决该问题的首选方法是什么：

我有一个Tabs组件，并且我正在考虑在父组件中进行多个异步调用，然后将必要的数据传递给子组件，如下所示：

const ParentComponent = (props) => {
    const res1 = useQuery(query1);
    const res2 = useQuery(query2);
    const res3 = useQuery(query3);
    const res4 = useQuery(query4);
    const res5 = useQuery(query5);

    if (
        res1.loading ||
        res2.loading ||
        res3.loading ||
        res4.loading ||
        res5.loading ||
    ) {
        return <LoadingCircle />
    }

    // Vaguely this, not exact
    return (
        <Tabs>
            <Tab>
                <ChildComponent1 data={res1.data} />
            </Tab>
            <Tab>
                <ChildComponent2 data={res1.data} otherData={res3.data}/>
            </Tab>
            <Tab>
                <ChildComponent3 data={res4.data} />
            </Tab>
            <Tab>
                <ChildComponent4 data={res2.data} otherData={res1.data} />
            </Tab>
        </Tabs>
    )
}

但是我一直以来认为初始负载可能会有点大，因为它会获取大量数据...是否最好让每个子组件都进行自己的异步调用，尽管它可能会重用相同的查询？例如：

const ChildComponent1 = () => {
    const res1 = useQuery(getMember);
    const res2 = useQuery(getProgress);

    // ....
}

const ChildComponent2 = () => {
    const res1 = useQuery(getMember);
    const res2 = useQuery(getAppointment);

    // ....
}

const ChildComponent3 = () => {
    const res1 = useQuery(getOtherThing);
    // ....
}

这样一来，呼叫一开始会减少负担，但需要加载每个标签。我对哪种方法更好/更是有些困惑。

我对大家都将如何处理此方法感兴趣！

Answer 1

关注分离

Answer 2

我是为一个电子商务网站执行的，对于我来说，我更喜欢在单击选项卡时加载数据（产品）。更改选项卡时获取的内容如此之小，而不是一次获取大量数据。