React-Redux 的用法

来源:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

React-Redux 将所有组件分成两大类:UI 组件(负责 UI 的呈现)和容器组件(负责管理数据和逻辑)。
一、UI 组件
1、UI 组件有以下几个特征。
(1)只负责 UI 的呈现,不带有任何业务逻辑
(2)没有状态(即不使用this.state这个变量)
(3)所有数据都由参数(this.props)提供
(4)不使用任何 Redux 的 API
(6)下面就是一个 UI 组件的例子。

2、因为不含有状态,UI 组件又称为"纯组件",即它跟纯函数一样,纯粹由参数决定它的值。

二、容器组件
1、容器组件有以下几个特征。
(1)负责管理数据和业务逻辑,不负责 UI 的呈现
(2)带有内部状态
(3)使用 Redux 的 API

三、UI 组件和容器组件的结合
1、如果一个组件既有 UI 又有业务逻辑,那么将它拆分成两层结构:外面是一个容器组件,里面包了一个UI 组件。前者负责与外部的通信,将数据传给后者,由后者渲染出视图。
2、React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。

四、connect()
React-Redux 提供connect方法,用于从 UI 组件生成容器组件。

上面代码中,myUIComponent是 UI 组件,myContainerComponent就是由 React-Redux 通过connect方法自动生成的容器组件。connect方法接受两个参数:mapStateToProps和mapDispatchToProps,它们定义了 UI 组件的业务逻辑。前者负责输入逻辑,即将外部数据state映射到 UI 组件的参数(props);后者负责输出逻辑,即将用户对 UI 组件的操作映射成 Action对象,从 UI 组件传出去。

五、mapStateToProps()
1、mapStateToProps是一个函数。它的作用是建立一个从外部state对象到 UI 组件的props对象的映射关系。执行后返回一个对象,里面的每一个键值对就是一个映射。
2、connect 让 mapStateToProps 订阅(绑定) Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。(在各个适当的位置,执行“订阅(绑定)函数”connect,把(自定义)函数 mapStateToProps放进DOM对象 Store的属性数组,等待合适的时机(state更新时)用“发布函数”遍历执行。)
3、mapStateToProps的第一个参数总是state对象,还可以使用第二个参数,代表容器组件的props对象。使用ownProps作为参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染。

4、如果connect方法省略mapStateToProps参数,那么UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件的更新。

六、mapDispatchToProps()
1、mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了用户的哪些操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。
2、如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。从下面代码可以看到,mapDispatchToProps作为函数,应该返回一个对象,该对象的“每个”键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。

3、如果mapDispatchToProps是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出。

七、<Provider> 组件
connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成 UI 组件的参数。一种解决方法是将state对象作为参数,传入容器组件。但是容器组件可能在很深的层级,一级级将state传下去就很麻烦。React-Redux 提供Provider组件,可以让容器组件拿到state。在下面的代码中,在根组件外面包了一层Provider,App的所有子组件都可以拿到state了。

它的原理是React组件的context属性,store放在了上下文对象context上面。源码如下:

React-Redux自动生成的容器组件的代码,就类似下面这样,然后子组件就可以从context拿到store,代码大致如下。

七、实例:计数器
1、下面是一个计数器组件实例,是一个纯 UI 组件。这个 UI 组件有两个参数:value和onIncreaseClick。前者需要从state计算得到,后者需要向外发出 Action。

2、下面定义value到state的映射,以及onIncreaseClick到dispatch的映射。

3、行为生成器(Action Creator)

4、使用connect方法生成容器组件。

5、定义组件的 Reducer(纯函数)。

6、生成store对象,在根组件外面包一层Provider。

九、React-Router 路由库。使用React-Router的项目,也是用Provider在Router外面包一层,毕竟Provider的唯一功能就是传入store对象。

注:订阅-发布模式:
1、给DOM对象增加一个自定义事件属性:obj.selfEvent=[];
2、定义一个订阅(绑定)函数、多个自定义函数、一个发布函数
3、多次执行订阅(绑定)函数,把多个自定义函数放进(1)中的数组里
4、执行发布函数,找到自定义事件属性,遍历执行数组里的自定义函数
总之,在各个适当的位置,执行“订阅(绑定)函数”,把(自定义)函数放进DOM对象的属性数组,等待合适的时机用“发布函数”遍历执行。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复