React- Apollo Client-结构化组件

Question

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

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

每种方法都好/坏？

Answer 1

恕我直言，没有真正的选择，缓存使用没有价值作为参数，然后没有好的部分与第二种方法。

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

假设我想将2个视图保持为不同的组件

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

利用项目组件，您可以拥有额外的抽象层和更复杂的用例。通过传递（转换为项目）切换类型处理程序，我能够从simgle项目级别更改它（gloablly）或更改本地项目视图类型 - 混合元素列表。