[React] 27.展示组件(Presentational component)和容器组件(Container component)之间有何区别？

[qiilee]

答案：

• 展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
• 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

[vkboo]

• 展示组件

• 无状态组件，组件组件本身不维护自己的state，接受props进行展示与简单的事件处理;
• 内部可以包含展示组件和容器组件，通常会包含一些自己的DOM标记和样式(style)
• 对应用程序的其他部分没有依赖关系，例如Reducer操作或store、路由等
• 不用关心数据是怎么加载和变动的。

• 容器组件

• 关注应用的是如何工作的，一般是有状态的，也可以接受props，内部包含了各种组件与相关的逻辑;
• 内部可以包含容器组件和展示组件，但通常没有任何自己的DOM标记，除了一些包装divs，并且从不具有任何样式
• 提供数据和行为给其他的展示组件或容器组件