React- Apollo客户-结构组件

时间:2018-09-03 19:16:00

标签: reactjs graphql apollo react-apollo next.js

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

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

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

每种方法的优缺点?

1 个答案:

答案 0 :(得分:0)

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

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

  

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

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

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

相关问题