展示型组件和容器型组件

Question

老师 我的理解是展示型组件和容器型组件两者最大的区别就是复用性。因为本课程您没有使用到redux. 我的疑问是如果项目中使用到了redux，展示型组件和容器型组件都可以直接connect到redux store，那么是否还需要用这种思维方式去写代码 比如在容器型组件里(父组件) 通过props传入数据和回调函数给展示型组件(子组件)使用。还是说选择直接将展示型组件connect到redux store 使用 ？我感觉稍微复杂点的展示型组件(除去button这种最基础的)直接connect到redux store更方便。但后者这样做，在跨项目的时候是否会因为连接到redux store而降低该展示型组件的复用性呢？谢谢。

Answer 1

张轩 2020-11-08 18:09:31

同学你好 假如用 redux 举例来说，connect 到 redux 的组件一般就是容器型组件，容器型组件和整个应用的状态有联系，脱离开这些全局状态来说这个组件就没有意义，而展示型组件一般是不会 connect 到 redux 中的，假如你要这么做了，我个人觉得是一种反模式。当然这只是很教条的把他们分成两个概念，在设计项目中，很可能出现你说的这种情况（稍微复杂点的展示型组件(除去button这种最基础的)直接connect到redux store更方便）。

举个例子：一个 UserProfile 组件，展示用户的信息。我们既可以把它设计成 展示型组件（我更喜欢的做法），数据完全是传入的：<UserProfile data={user} />

也可以做成复杂的展示型组件（你描述的，我不会设计这样的展示型组件）：<UserProfile /> user 的数据来自于redux 的 connect。

当然第二方法中，对单测不是很友好。第一个单元测试非常直接和明了。第二个经过 connect，属性构造会有些奇怪。

• 提问者 ywang04 #1

  谢谢老师回复 那请问UserProfile的这个data prop的数据来源是来自其父组件(已经connect到store的组件) 向下传递的吗？我的理解是redux store是为了避免多层组件往下传props的繁琐 而把数据都放在store里了 那按照您的做法 似乎还是保留了props的一部分传统？如理解有误 请指正。
  另外您提到的 “容器型组件和整个应用的状态有联系，脱离开这些全局状态来说这个组件就没有意义”指的就是该组件已经丧失了复用性了 对吗？ 谢谢

• 张轩 回复 提问者 ywang04 #2

  你说的是对的 ，我说的 UserProfile 这个组件，怎么做都可以，假如从复用性考虑，比如两个项目都有这样一个用户头像和姓名的组件，那么展示型组件是更好的，因为这两个项目的 redux store 有可能是不一样的。假如不一样，有可能这个组件就没法复用。
  第二个问题 我指的是这个意思。
  我们现在其实不用特别考虑这个概念，提出这个概念的 dan abrmov 在新的文章中也说了，有了 hooks 这个概念也不太适用了。你推荐你看看他的文章。
  
  https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

• 提问者 ywang04 回复 张轩 #3

  谢谢老师回复 我看得就是这篇文章。目前实际项目里我们是用hooks 我准备多采用您推荐的方式 因为这样做 单元测试确实会简化很多。但是不明白为什么Dan在这篇文章里提出有了hooks 这些概念就又不适用了呢？谢谢