React×Redux——react-redux库connect()方法与Provider组件

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/54880804 转载请添加该地址】

在写Redux的时候我们就了解了
如果使用Redux的话配合React是最好的
Dan Abramov为此还特意封装了一个react-redux库来提供便利

#概念
一旦我们选择使用了这个react-redux库
那么我们的组件概念就要加以区分了
从现在起我们的组件分为展示组件和容器组件两种
（参考了通俗易懂的阮大神博客）
##展示组件
展示组件（presentational component）
也叫UI组件、纯组件
特点如下:

• 负责UI显示
• 无状态不使用this.state
• 数据来自this.props
• 不使用任何redux的API

展示组件其实就是把我们的普通组件的数据与逻辑抽离出来

##容器组件
容器组件（container component）
特点如下：

• 负责管理数据和业务逻辑
• 带有内部状态
• 使用redux的API

容器组件是由我们react-redux库的API通过展示组件生成的
##关系
从它们的名字也可以猜到，它们是内外关系
容器组件包裹着展示组件

##优势
说的再通俗一些
我们原来是将结构和逻辑都装在一个组件中
现在将这个组件继续拆成负责视图的组件和负责逻辑数据的组件
这样做有如下优点：

• 理解
  • 数据与逻辑分开，更便于我们理解
• 分离
  • 必须将标签拆分，可用性更强
• 重用
  • 一个展示组件可以搭配不同容器组件
• 视图
  • 展示组件可以放到单独页面中调整UI

下面我们来看一下react-redux库的核心
connect()方法与Provider组件

#connect
上面也说到了
我么的容器组件是由库API得到的