展示组件(Presentational component)和容器组件(Container component)之间有何不同?

[careteenL]

• 展示组件
  1. 关注页面的展示效果（外观）
  2. 内部可以包含展示组件和容器组件，通常会包含一些自己的DOM结构和样式
  3. 通常允许通过this.props.children方式来包含其他组件。
  4. 对应用程序的其他部分没有依赖关系，例如Flux操作或store。
  5. 不用关心数据是怎么加载和变动的。
  6. 只能通过props的方式接收数据和进行回调(callback)操作。
  7. 很少拥有自己的状态，即使有也是用于展示UI状态的。
  8. 通常会写成函数式组件除非该组件需要自己的状态，生命周期或者做一些性能优化。
• 容器组件
  1. 关注应用的是如何工作的
  2. 内部可以包含容器组件和展示组件
  3. 提供数据和行为给其他的展示组件或容器组件
  4. 往往是有状态的，因为它们倾向于作为数据源
  5. 通常使用高阶组件生成，例如React Redux的connect。