JavaScript

JavaScript学习随手记

  • 今天学习react-redux时学到connect函数组件时对connect函数有点蒙圈，表示不能理解，请看如下代码:
    1
    2
    3
    4
    5
    6
    7
    function Users(props){
       return (<div></div>);
    }
    function mapStateToProps({ users }) {
      return { users };
    }
    export default connect(mapStateToProps)(Users);

以为这种写发属于ES6语法糖，于是翻阅ES6标志并没有此项。苦思冥想最后灵光一闪既然是dva的函数那他的源码中肯定有此函数的定义，打开源码一看其实原理很简单,就是connect函数中返回了一个函数，然后在返回函数中在传入了参数Users。参考代码定义如下；

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    //获取函数名称displayName和name属于Function的原型属性
    function getDisplayName(WrappedComponent) {
        return WrappedComponent.displayName || WrappedComponent.name || 'Component'
    }

    function connect(mapStateToProps){
       return function wrapWithConnect(WrappedComponent) {
    	 var name = getDisplayName(WrappedComponent);
    	 console.log("function name:"+name);
       }
    }

    //测试代码
    function Users(props){
       return (<div></div>);
    }
    function mapStateToProps({ users }) {
      return { users };
    }
    connect(mapStateToProps)(Users);

    //控制台输出
    function name:Users

这种定义方法叫做“柯里化”函数，是指把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。
箭头函数

  • 1
    2
    3
    4
    5
    6
    7
    8
    //ES6写法
    ()=>{
    	
    }
    //ES5 写法
    function arrow(){
      return {}; 
    }