原文链接：Smart and Dumb Components
作者：Dan Abramov
我发现当我写React应用时有一个非常有用的小模式(pattern)。如果你使用React有一段时间了，你应该早就发现它了。这篇文章解释的很好(我也翻译了)，不过我想加多一些观点。
你会发现你的组件要是能分成两类，复用起来会变得更轻松。我称他们两类分别为Smart和Dumb，我也听说过Fat和Skinny，Stateful和Pure，Screens和Components等等。这些虽然不完全一样的，但本质是相类似的。
我的 dumb 组件：
- 对应用的其他部分没有依赖，例如 Flux actions 或者 stores。
- 通过
this.props.children通常允许放在容器里。(Often allow containment via this.props.children) - 统一通过 props 来获取数据和回调函数。
- 有 CSS 文件关联他们。
- 几乎没有它们自己的 state。
- 或许里面也使用了其他的 dumb 组件。
- 例子：Page, Sidebar, Story, UserInfo, List.
我的 smart 组件：
- 包含了一个或多个 dumb 或者 smart 组件。
- 在 Flux stores 中保存 state 并 通过 objects 的形式传递给 dumb 组件。
- 访问 Flux actions 并作为回调函数提供给 dumb 组件。
- 从来没有它们自己的 CSS 样式。
- 几乎不通过它们自己生成 DOM ，用 dumb 组件来布局。
- 例子：UserPage, FollowersSidebar, StoryContainer, FollowedUserList。
这种方法的优点
- 关注点分离的更清晰。通过使用这种方法来写组件，你会更好的了解你的应用和你的UI。
- 更好的复用性。你可以在完全不同的 state sources 下使用同样的 dumb 组件。
- Dumb 组件实质上是你的 app 应用的“颜料”。你可以把它们放在一个页面上，然后让设计师在不需要app的业务逻辑下，去调整它们的变化。你可以在那个页面上运行截屏回归测试。
- 这让你提取出“布局（模板）组件”，如 Sidebar, Page, ContextMenu 并且使用 this.props.children 来代替重复使用多个相同标记和布局的 smart 组件。
记住，组件没必要生成 DOM。他们只需要提供组成UI之间的边界。
好好利用它吧。
Example
This gist by Michael Chan pretty much nails it.
