关于connect组件源码的疑问

Question

export cont connect =  (mapStateToProps,mapDispatchToProps) => （WrappedComponent) => {
......
}

老师，我想问下这个箭头函数的语法，(mapStateToProps,mapDispatchToProps) => （WrappedComponent) => {} ，这种格式没见过。两个=>没看懂啥意思，感觉像两组参数。

续问1
老师您好，我好想问下，您这返回的是函数，源码中返回的是组件吧！我的理解就是WrapperCompnent传递给返回值中的变量是吗？
还麻烦您看下，直接将参数传递给返回值可以吗？

  export cont connect = (mapStateToProps, mapDispatchToProps,WrapperCompnent) => {
    //......
    return< WrapperCompnent{...}/>
}

老师我查了谷歌发现，你看我查的对吗？
多重箭头函数就是一个高阶函数，相当于内嵌函数

const add = x => y => y + x;
// 相当于
function add(x){
    return function(y){
        return y + x;
    };
}

那如果 =>

const add = x => y => z => y + x + z;
// 相当于
function add(x){
    return function(y){
        return function(z){
	        return y + x + z;
	    };
    };
}

老师您看我查，是这种简写吗？
但是双越老师，我没有查到这种组件形式的简写，只查到了高阶函数简写。按照这种高阶函数简写，就成了，您看对吗？感觉很诡异，还是React组件有不一样的箭头函数语法？

  export cont connect = (mapStateToProps, mapDispatchToProps) => (WrapperCompnent) => { {
    //......
    const fn = (WrapperCompnent) => {...this.state.allProps}
    return< fn/>
}

Answer 1

双越 2021-02-20 21:59:02

export cont connect = (mapStateToProps, mapDispatchToProps) => {
    const fn = (WrapperCompnent) => { ... }
    return fn
}

就这个意思。

PS：顺便我吐槽一下，箭头函数的这种简写方式，真的读起来很恶心，我反正很讨厌。

• 提问者 THEEND0123 #1

  非常感谢！

• 提问者 THEEND0123 #2

  老师您好，我好想问下，您这返回的是函数，源码中返回的是组件吧！我的理解就是`WrapperCompnent`传递给返回值中的变量是吗？
  还麻烦您看下，直接将参数传递给返回值可以吗？
  ```js
    export cont connect = (mapStateToProps, mapDispatchToProps,WrapperCompnent) => {
      //......
      return< WrapperCompnent{...}/>
  }
  ```
  PS：老师这里貌似不能用markdown，我把代码和问题抄了，补充在问答里了，方便您阅读 ↑↑↑↑↑↑

• 双越 回复 提问者 THEEND0123 #3

  它是返回了函数，这个函数执行时返回组件。层次关系要考虑好。

点开查看后面2条评论