持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
React-redux
'React-redux是用React封装了Redux'
'封装实思想：把显示内容封装成ui组件，业务逻辑封装成容器组件'
1、Redux 是独立的，他与react没有任何关系。React-redux是官方提供的一个库，用来结合redux和redux模块
2、Store的单打功能：dispath，subscribe，getState，都不需要手动来写，react-redux已经做了，
react-redux提供了两个接口，Provider、connet
3、只使用redux流程：
Component—>dispath（action）—>reducer—>subscribe—>getState—>component
4、只使用react-redux流程：
Component—>actionCreator（data）—>reducer—>compontent
5、React-Redux将所有组件分成两大类:UI组件(presentational
component)和容器组件(container component)
6、UI组件的特点:
1）只负责UI的呈现，不带有任何业务逻辑
2）没有状态（即不使用this.state这个变量)
3）所有数据都由参数(this.props）提供
4)不使用任何Redux的API
例如: const Title = value => <h1>{value}</h1>
因为不含有状态，'UI组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值'
7、容器组件特点
1)负责管理数据和业务逻辑，不负责U的呈现
2) 带有内部状态
3)使用Redux的API
8、UI组件负责UI的呈现，容器组件负责管理数据和逻辑
9、React-Redux规定，所有的U组件都由用户提供，容器组件则是由React-Redux自动生成。也就是说，用户负责视觉层，
状态管理则是全部交给它
react-redux相关组件和方法
1、Provider组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store
2、connect()
React-Redux提供connect方法，用于从U组件生成容器组件。connect的意思，就是将这两种组件连起来
例如:import { connect } from 'react-redux'const VisibleTodoList = connect()(TodoList);
TodoList是 UI组件，VisibleTodoList就是由React-Redux通过connect方法自动生成的容器组件
connect用法
connect(mapStateToProps, mapDispatchToProps, mergeProps,options)
它接受四个参数并且再返回一个函数 —— wrapWithConnect,wrapWithConnect接受一个组件作为参数
wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的
子组件然后return出去。
connect参数说明
mapStateToProps(state, [ownProps]):接受两个参数，store的state和自定义的props，并返回一个新的对象，
这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会
触发mapStateToProps
'mapStateToProps：类型是一个函数类型，返回值是对象格式'
例如: function mapStateToProps(state){return {todos:state.todos};
mapDispatchToProps(dispatch,[ownProps]):mapDispatchToProps如果是对象，那么会和store绑定作为props的
一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，
这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会
返回一个对象，如果是函数，这个对象的key值是可以自定义的
function mapDispatchToProps(dispatch){
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
};
}
mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用
actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps.
高阶组件
1、高阶组件（HOC)是React里的高级技术为了应对重用组件的逻辑。HOCs本质上不是React APl的一部分。它是从React的
组合性质中显露出来的模式
1）'一个高阶组件就是一个获取一个组件并返回一个组件的函数'例如react-redux里的content方法
2）一个高阶组件，可以在原有组件的基础上，对其增加新的功能和行为
2、const HigherOrderComponent = (WrappedComponent)=>{
return class WrapperComponent extends Component {
render() {
//do something with WrappedComponent
}
}
}
高阶组件注意问题
1、'不要在render方法内使用高阶组件'
1) React的差分(diffing )算法(也被叫做一致化算法,reconciliation)使用组件标识符(identity)来确定是更新
一个已经存在的子树，还是直接丢其他然后挂在一个新的。如果render方法返回的组件跟之前渲染使用的组件相等(===),
React会将它跟新的组件递归比较和进行子树更新。如果它们不等，之前的子树会准备整个卸载掉。
2）但是对于HOC,'如果你在一个组件的render方法内使用了HOC，会导致这个组件的状态和他所有的子节点都被丢掉了'
3）所以可以在一个组件的生命周期方法或者它的构造函数中应用HOC
2、'静态方法必须要复制'(state)
1）有时候我们会在一个组件上定义一个静态方法
2）但是当你对一个组件使用HOC时，源组件被封装在了一个容器组件中。这意味着新的组件不具有任何被封装组件的
静态方法
3）在返回容器组件前，你需要把被封装组件上的静态方o复制到森器nPage·组件上或组件之外独立导出静态方法
3、'Ref 没有被传递'
使用高阶组件的惯用做法是用来传递所有属性给被封装组件，但是这个做法对ref无效。这是因为ref并非真正的属性
它就像是key,它会被React特殊对待和处理。如果你某个HOC返回的组件的某个元素增加了一个ref属性，那么这个ref指向
的实例是最外层的容器组件，而不是被封装组件。
