react component分类

• 展示组件（也可以叫做Dumb定义：只会接收props并根据props确定渲染结果的组件

  • 特点：复用性极高

  • 划分原则：我们开发一个控件，首先确定会不会被复用，只要被复用就要开发成展示组件
    若果存在Dumb的子组件，那一定是Dumb组件
    所有Dumb都会放在components目录下

  • 为什么这么划分：对于Dumb来说依赖的东西越少越好
    依赖的越少复用性越高

• 容器组件（也可以叫做）定义：专门用来做数据相关的应用逻辑，拉取数据，把Dumb关联起来，通过props传递给Dumb

  • 特点：处理业务数据逻辑，调度子组件

  • 划分原则：容器组件我理解是倒推出来的，比如“在某个业务场景中你需要把几个容展示组件拼凑起来，并且需要一个调度管理这几个展示组件的角色，那么你需要一个容器组件
    ‘基本’不存在复用，需要和redux做连接connect，有处理异步数据操作的组件
    所有smart都会放在container目录下

  • 为什么这样划分：smart不用考虑太多复用性的问题，他们用是用来执行特定业务逻辑的
    smart组件通常都有子组件，可为smart或Dumb

• 函数式无状态组件（stateless function）0.14后推出的一种组件编写方式

  • 无状态组件和纯函数的结合

    • 无状态组件：内部没有state，输出只取决于props, context
    • 纯函数：相同的输入，输出永远相同，没有可观察的任何副作用(不会更改传入值)

  • 接收props, context

const PropTypes = require('prop-types');

const Button = ({children}, context) =>
  <button style={{background: context.color}}>
    {children}
  </button>;

Button.contextTypes = {color: PropTypes.string};

• 为什么要用

  • 语法简洁性（fb推荐理由）
  • 占内小
  • 首次render性能更好
  • 可扩展性强（可以进行函数的compose，currying改造）

• 缺点：

  • 无生命周期（不能在shouldComponentUpdate进行浅对比优化渲染）
  • 没有this