展示型组件和容器型组件
来源：2-2 文件代码结构
ywang04
2020-11-08
老师 我的理解是展示型组件和容器型组件两者最大的区别就是复用性。因为本课程您没有使用到redux. 我的疑问是如果项目中使用到了redux，展示型组件和容器型组件都可以直接connect到redux store，那么是否还需要用这种思维方式去写代码 比如在容器型组件里(父组件) 通过props传入数据和回调函数给展示型组件(子组件)使用。还是说选择直接将展示型组件connect到redux store 使用 ？我感觉稍微复杂点的展示型组件(除去button这种最基础的)直接connect到redux store更方便。但后者这样做，在跨项目的时候是否会因为连接到redux store而降低该展示型组件的复用性呢？谢谢。
1回答
-
张轩
2020-11-08
同学你好 假如用 redux 举例来说，connect 到 redux 的组件一般就是容器型组件，容器型组件和整个应用的状态有联系，脱离开这些全局状态来说这个组件就没有意义，而展示型组件一般是不会 connect 到 redux 中的，假如你要这么做了，我个人觉得是一种反模式。当然这只是很教条的把他们分成两个概念，在设计项目中，很可能出现你说的这种情况（稍微复杂点的展示型组件(除去button这种最基础的)直接connect到redux store更方便）。
举个例子：一个 UserProfile 组件，展示用户的信息。我们既可以把它设计成 展示型组件（我更喜欢的做法），数据完全是传入的：<UserProfile data={user} />
也可以做成复杂的展示型组件（你描述的，我不会设计这样的展示型组件）：<UserProfile /> user 的数据来自于redux 的 connect。
当然第二方法中，对单测不是很友好。第一个单元测试非常直接和明了。第二个经过 connect，属性构造会有些奇怪。
032020-11-09
相似问题
回答 1
回答 1