关于connect组件源码的疑问——续问1
来源:7-26 什么是React高阶组件
THEEND0123
2021-02-20
export cont connect = (mapStateToProps,mapDispatchToProps) => (WrappedComponent) => {
......
}
老师,我想问下这个箭头函数的语法,(mapStateToProps,mapDispatchToProps) => (WrappedComponent) => {} ,这种格式没见过。两个=>
没看懂啥意思,感觉像两组参数。
双越 老师回答:
export cont connect = (mapStateToProps, mapDispatchToProps) => {
const fn = (WrapperCompnent) => { ... }
return fn
}
就这个意思。
PS:顺便我吐槽一下,箭头函数的这种简写方式,真的读起来很恶心,我反正很讨厌。
关于connect组件源码的疑问
续问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回答
-
返回的是不是组件,在这个问题里讨论吧,别讨论重复了 http://coding.imooc.com/learn/questiondetail/222004.html
你如果要讨论箭头函数的简写,就先不要把 React 混进来,否则就乱了。箭头函数是 ES6 的语法,React 是一个框架,两者完全不同层次的东西,不要放在一起讨论。
112021-02-21
相似问题