记React connect的几种写法(小结)
connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])
连接React组件与Reduxstore。
连接操作不会改变原来的组件类，反而返回一个新的已与Reduxstore连接的组件类。
参数
[mapStateToProps(state,[ownProps]):stateProps](Function):如果定义该参数，组件将会监听Reduxstore的变化。任何时候，只要Reduxstore发生改变，mapStateToProps函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的props合并。如果你省略了这个参数，你的组件将不会监听Reduxstore。如果指定了该回调函数中的第二个参数ownProps，则该参数的值为传递到组件的props，而且只要组件接收到新的props，mapStateToProps也会被调用。
[mapDispatchToProps(dispatch,[ownProps]):dispatchProps](ObjectorFunction):如果传递的是一个对象，那么每个定义在该对象的函数都将被当作Reduxactioncreator，而且这个对象会与Reduxstore绑定在一起，其中所定义的方法名将作为属性名，合并到组件的props中。如果传递的是一个函数，该函数将接收一个dispatch函数，然后由你来决定如何返回一个对象，这个对象通过dispatch函数与actioncreator以某种方式绑定在一起（提示：你也许会用到Redux的辅助函数bindActionCreators()）。如果你省略这个mapDispatchToProps参数，默认情况下，dispatch会注入到你的组件props中。如果指定了该回调函数中第二个参数ownProps，该参数的值为传递到组件的props，而且只要组件接收到新props，mapDispatchToProps也会被调用。
[mergeProps(stateProps,dispatchProps,ownProps):props](Function):如果指定了这个参数，mapStateToProps()与mapDispatchToProps()的执行结果和组件自身的props将传入到这个回调函数中。该回调函数返回的对象将作为props传递到被包装的组件中。你也许可以用这个回调函数，根据组件的props来筛选部分的state数据，或者把props中的某个特定变量与actioncreator绑定在一起。如果你省略这个参数，默认情况下返回Object.assign({},ownProps,stateProps,dispatchProps)的结果。
[options](Object)如果指定这个参数，可以定制connector的行为。
[pure=true](Boolean):如果为true，connector将执行shouldComponentUpdate并且浅对比mergeProps的结果，避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或state而只依赖于props和Reduxstore的state。默认值为true。
[withRef=false](Boolean):如果为true，connector会保存一个对被包装组件实例的引用，该引用通过getWrappedInstance()方法获得。默认值为false
返回值
根据配置信息，返回一个注入了state和actioncreator的React组件。
第一种
最普通，最常见，delllee和官网第写法。
importReact,{Component}from'react';
import{connect}from'react-redux';
import{Button}from'antd-mobile';
import{addGunAction,removeGunAction,removeGunAsync}from'./store/actionCreators'
classAppextendsComponent{
render(){
console.log();
return(
{this.props.gun}
+
-
慢-
第二种
初次接触，感觉有点绕，不太好理解，为什么点击了，直接就派发action了？
importReact,{Component}from'react';
import{connect}from'react-redux';
import{Button}from'antd-mobile';
import{addGunAction,removeGunAction,removeGunAsync}from'./store/actionCreators'
classAppextendsComponent{
render(){
console.log();
return(
{this.props.gun}
{/*不用像第一种那样，点击调用一个方法，方法里再派发action
这种直接点击派发action就可以*/}
+
-
慢-
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。