React-redux
React-redux将组件分为两大类:UI组件和容器组件。
UI组件特点:
- 只负责UI的呈现,不带有任何的业务逻辑
- 没有状态(即不使用this.state属性)
- 所有数据都由参数(this.props)提供
- 不使用任何的Redux的API
计数器例子的Counter组件就是一个UI组件,他所需要的数据在render里由props提供
容器组件特点:
- 负责管理数据和业务逻辑,不负责UI的呈现
- 带有内部状态
- 使用Redux的API
换句话说,UI组件负责UI的呈现,容器组件负责管理数据和逻辑。
React-redux规定,所有的UI组件都由用户提供,容器组件则有React-redux自动生成。也就是说用户负责视觉层,状态管理全交给它。
计数器
|
|
使用connect和Provider来生成计数器
|
|
mapStateToProps会订阅store,每当state更新时,就会重新计算UI组件的参数,从而触发UI组件的重新渲染。