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组件与业务逻辑以和状态管理分离开来

猜你喜欢

转载自www.cnblogs.com/zjl-712/p/11426097.html