关于connect组件源码的疑问

来源:7-26 什么是React高阶组件

THEEND0123

2021-02-20

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/>
}
写回答

1回答

双越

2021-02-20

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

就这个意思。

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

2
5
weixin_慕丝2377090
回复
慕函数3762822
看了HOC,我才意识到柯里化实践业务会怎么出现,Hooks还是香啊。
2022-05-15
共5条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4669 学习 · 1647 问题

查看课程