react--高阶组件connect

connect串联model跟组件；connect这个函数本身可以传参，映射store的属性；

connect() 接收四个参数，它们分别是mapStateToProps ， mapDispatchToProps ， mergeProps 和 options。

const mapStateToProps = (state)=>{return {num:state.num;} }
export default connect(mapStateToProps)(组件名称)
           

state是model的state，项目开发中会直接解构；比如：

export default connect(({num,login})=>({num,login}))(组件名称)
@connect(({num,login})=>({num,login}))
           

两种写法意义是一样的，都是串联model跟组件；不同点：

1. 前者是在函数组件中使用，后者是在类组件用，主要是因为函数组件内不能用@修饰器；
2. 写的位置；前者是写在最后面，后者写在class类前

   

   

   用的时候你会发现页面有警告，这个是因为experimentalDecorators没有开启，用了typescript装饰器；打开vscode的setting，搜索experimentalDecorators，改为true就可以了

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
           

具体使用方法this.props.xx

@connect(({loading})=>({load:loading}))
class Test extends PureComponent {
  render() {
    const { load } = this.props;
    return (
      <Spin spinning = {load}></Spin>
    )
 }
           

参考：

• 高阶组件官方文档
• connect英文版说明

别的博主的一些讲解：

• 掘金讲解有点像中文版说明
• https://www.jianshu.com/p/21224080326e
• https://www.cnblogs.com/irobotzz/p/12292283.html
• https://blog.csdn.net/sf1989424/article/details/103161138

上面的只能说是我浅薄的理解，刚开始接触，自己理解的可能也不太对；要是有不对，麻烦指出。