React- Apollo客户-结构组件

Question

比方说，组件-TodoList需要以两种不同的方式显示TODO的列表，即listview和gridview。页面上有一个在视图之间切换的开关。假设我想将2个视图保留为不同的组件，最佳实践是什么？

1. 使用graphql查询创建TodoList组件，然后将查询结果传递给TODOListView和TODOGridView组件？

2. 使用NO graphql查询创建TodoList组件，然后在TODOListView和TODOGridView组件中写入相同的grqphql查询（不是DRY，每个组件中的查询重复，但是阿波罗缓存将确保不会多次调用它）？

每种方法的优缺点？

Answer 1

恕我直言，没有真正的选择，缓存使用没有价值，因此使用第二种方法没有好处。

考虑可用性，用户体验，以用户为中心的设计，您可能希望在切换视图类型时保留页面，排序和过滤状态。作为用户，您期望这种行为。只有第一个解决方案才可以轻松使用此功能。

  

假设我想将2个视图保留为不同的组成部分

恕我直言，这也是一个错误的假设。当然可以，但列表几乎相同，真正的区别在于项目/行渲染。 如果这是一个简单的样式集更改（或添加了一些元素），则甚至不需要为项目使用组件，只需进行条件渲染即可。您可以稍后对其进行更改/重构。

利用项目组件，您可以具有其他抽象层和更复杂的用例。向下传递（进入项目）切换类型处理程序后，我可以从单个项目级别（可笑地）更改它，或本地更改项目视图类型-混合元素列表。