- 展示组件(也可以叫做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