展示组件

展示组件内部是没有状态管理的，正如其名，就像一个个“装饰物”一样，完全受制于外部的 props 控制。展示组件具有极强的通用性，复用率也很高，往往与当前的前端工程关系相对薄弱，甚至可以做到跨项目级的复用。

代理组件

代理组件常用于封装常用属性，减少重复代码。关于代理组件你应该不陌生，可能经常会写。

const Button = props =>
 
  <button type="button" {...props}>
 

虽然进行封装感觉是多此一举，但切断了外部组件库的强依赖特性。在大厂中引入外部组件库需要考虑两点：

• 如果当前组件库不能使用了，是否能实现业务上的无痛切换；
• 如果需要批量修改基础组件的字段，如何解决？

样式组件

样式组件也是一种代理组件，只是又细分了处理样式领域，将当前的关注点分离到当前组件内

布局组件

<Layout Top={<NavigationBar />} Content={<Article />} Bottom={<BottomBar />} />

由于布局组件无需更新，就可以通过写死shouldComponentUpdate  的返回值直接阻断渲染过程。对于大型前端工程，类似的小心思可以带来性能上的提升。当然，这也是基于代理组件更易于维护而带来的好处。