展示和容器组件Presentational and Container Components

[ZWkang]

文章地址

这里有一些简单的模式，当我写react应用的时候经常用到，如果你一直在走react，你也许早已经发现过它，这篇文章解释得很好，但我想补充几点。 如果将它们分为两类，你会发现你的组件更容易重用和合理，我称他们为容器组件，演示组件

我的展示组件

关心组件长啥样
可能包含表示组件和容器组件，通常里面有自己的一些DOM标记和样式 - 经常允许通过this.props.children容纳
对应用程序的其他部分没有依赖关系，例如Flux操作或store
不要指定数据如何加载或者如何变化
获取数据和callback只通过props
很少拥有他们自己的状态（当他们这样做的话，它应该是UI状态而不是数据）
类似功能组件编写，除非它们需要状态，生命周期挂钩或性能优化。
例如： Page, Sidebar, Story, UserInfo, List

我的容器组件

关心组件干什么
可能包含容器组件展示组件，在内部但通常没有任何自己的DOM标记，除了一些包装divs，并且从来没有任何样式。
将数据与行为给展示组件或者其它容器组件
调用Flux action并将它们作为回调传递给展示组件
往往是有状态的，因为它们倾向于作为数据源。
通常使用高阶组件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工编写。
Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList. -

一般放置在不同文件夹下

更好的分离问题。 通过这种方式编写组件，您可以更好地理解您的应用和用户界面 - 更好的可重用性。 您可以将完全不同的状态源使用相同的表示组件，并将它们转换为可以进一步重用的单独的容器组件。 演示组件基本上是您的应用程序的“调色板”。
您可以将它们放在单个页面上，让设计师调整所有变体，而不必触摸应用程序的逻辑。
您可以在该页面上运行屏幕截图回归测试。
这迫使您提取诸如侧边栏，页面，上下文菜单等“布局组件”并使用this.props.children，而不是在多个容器组件中复制相同的标记和布局。
请记住，组件不必发出DOM。 他们只需要在UI关注点之间提供构图边界。