在 React 中

某些组件可能具有 state 。试着分离处理数据、逻辑（比如数据格式化）的组件与处理样式的组件。通过分离这两者，追溯代码中的变化将会简便很多。

如果后端 API 格式改变了，你所要做的只是进入你的容器组件，确保在新数据格式下渲染与之前相同的展示性组件，这样一切都会运行完好。
另一方面，如果 APP 的视觉设计或用户体验需要更改，你所要做的只是进入你的展示性组件并确保他们自身能正确显示。由于这些组件并不关注它们在何时何处被渲染，你也没有改变渲染哪个组件，一切都会运行完好。
通过区分这两种类型的组件，你就不需要同时进行多个不相关联的更改，这避免了意外错误。

在Vue中

尤大把组件分为四种

纯展示型 ：数据进，dom出
接入型组件 ：react中的ContainerComponents 前端数据的service层打交道，包含api交互逻辑
交互性组件：表单组件的封装加强，UI型组件 强调复用
功能性组件： <router> <translation>

react 优点：js的灵活性 功能组件优势

vue优点：纯展示型优势