Javascript 建议使用apollo store的哪种方法，读取片段/读取查询，或者使用组件中的graphql hoc连接查询，或者传递道具？

我们在项目中使用了

react apollo

，它是

graphql HOC

。此外，我们正在使用

react

中的

PureComponent

，以确保每次父组件重新渲染时，如果子组件的

道具未更改，则不会导致子组件重新渲染。对于阿波罗缓存的读写，我们使用阿波罗客户端

graphql HOC
与一个组件挂钩，用于从服务器检索数据，并将数据存储到缓存中。我们希望从缓存中向子组件提供部分数据

让我们举个例子。在祖先级别，我们从服务器获取项目列表。在儿童层面，我们需要阿波罗商店中已有的特定物品的详细信息

要做到这一点，有三种可能的方法：

将数据作为道具传递给子组件

下面是父级组件的呈现方法，我们从服务器获取项目列表

render（）{
返回(
)
}


下面是列表组件的渲染方法

render（）{
返回(
)
}


下面是Item组件的渲染方法

render（）{
const item=this.props.list[this.props.selectedItem]
返回(
{this.props.item}
)
}

将
graphql HOC
与
fetch policy
设置为
cache first
的子组件内部挂钩

这里是Item组件，我们在其中钩住
graphql查询
，以获取Item

class ItemComponent扩展了React.PureComponent{
render（）{
返回(
{this.props.item}
)
}
}
导出默认组合(
graphql（查询{
选项：（{id}）=>({
变量：{id}
})
}
)

使用apollo客户端的
readFragment
功能
render（）{
const item=client.readFragment({
id:`List:${this.props.selectedItem}`
片段：“ListFragment”
});
返回(
{this.props.item}
)
}

这三种方法也有相关的优点和缺点

第一种方法在任何情况下都很有效，唯一的问题是我们通过不必要的道具自上而下地传递数据

第二种方法在任何情况下都能很好地工作，唯一的问题是我们必须不必要地钩住查询以访问缓存

第三种方法看起来很干净，但唯一的问题是当更新
apollo cache
时组件不会重新渲染，因为我们使用
PureComponent

我对这三种方法感到困惑。因此，如果你能提供我应该使用哪种方法的见解，或者如果你能提供任何其他混合方法，那将是一个很大的帮助