React之react-redux

react-redux相关概念及设计思想介绍

1、react-redux 将所有组件分为两大类 UI组件（负责UI的呈现）和容器组件（负责管理数据和逻辑）。

2、UI组件特点

只负责UI的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量），注意：使用react-redux后推荐组件用函数声明，而不是类声明。
所有的数据都由参数（this.props）提供
不使用任何 Redux 的 API
因为不含状态，UI组件又称为“纯组件”，即它跟纯函数一样，纯粹由参数决定他的值。

3、容器组件（相当于包含子组件的父组件），容器组件包含UI组件

负责管理数据和业务逻辑，不负责UI呈现
带有内部状态
使用Redux的API

4.UI组件和容器组件的结合

如果一个组件既有UI又有业务逻辑，那么将它拆分成两层结构：外面是一个容器组件，里面是一个UI组件。前者负责与外部的通讯，将数据传给后者，由后者渲染出视图。
react-redux 规定，所有的 UI 组件都由用户提供，容器组件则是由react-redux自动生成。

5、react-redux 中几个API概念：

react-redux中的connect() 用于从UI组件生成容器组件
connect有两个常用的参数：mapStateToProps() mapDispatchToProps()
mapStateToProps是一个函数。它的作用是建立一个从外部state（即store中的数据）对象到UI组件的props对象的映射关系。执行后返回一个对象，里面的每一个键值对就是一个映射；mapStateToProps会订阅（绑定）store，每当（store）state更新的时候，就会自动执行，重新计算UI组件的参数，从而触发UI组件的重新渲染；mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发UI组件的重新渲染
如果connect方法省略mapStateToProps参数，那么UI组件就不会订阅store，就是说store的更新不会引起UI组件的更新。
mapDispatchToProps是connect函数的第二个参数，用来建立UI组件的参数到store.dispatch方法的映射（分发业务逻辑），也就是说，它定义了用户的哪些操作应该当做Action，传给store，他可以是一个函数，也可以是一个对象；如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数，应该返回一个对象，该对象的每一个键值对都是一个映射，定义了UI组件的参数怎样发出action;如果mapDispatchToProps是一个对象，它的每个键名也是对应UI组件的同名参数，键值应该是一个参数，会被当做action creator，返回的 action 会由 redux 自动发出

6、react-redux的<Provider>组件 connect 方法生成容器组件以后，需要让容器组件拿到state 对象，才能生成UI组件的参数。一种解决方法是将state对象作为参数，传入容器组件。但是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

为此 react-redux 提供 Provider 组件，可以让容器组件拿到state，在根组件外面包了一层Provider，App的所有子组件都可以拿到state了，它的原理是 React 组件的context 属性，store放在了上下文对象context上面。react-redux自动生成的容器组件的代码，就类似下面这样，然后子组件就可以从context拿到store

<Provider store={store}>

    <App />

<Provider>

7、总结以上介绍：react-redux的思想是将UI组件与业务逻辑以和状态管理分离开来

巴特西

React之react-redux

最新文章

热门文章