函數(shù)式編程學(xué)習(xí)概要

大綱

image.png

http://naotu.baidu.com/file/62bcbb1a539963f96bf3c5dcc515dbfa

curry函數(shù)

var curry = function curry(f) {
  //獲取curry的參數(shù)看幼，如果第二個參數(shù)不存在批旺，則創(chuàng)建一個空數(shù)組
  var arr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return function f1( ) {
    //獲取當前函數(shù)的參數(shù)
    for (var len = arguments.length, args = Array(len), i = 0; i < len; i++) {
      args[i] = arguments[i];
    }
    //如果參數(shù)沒有傳完，合并arr和args诵姜，遞歸調(diào)用curry
    //f2函數(shù)其實是遞歸調(diào)用的終止條件汽煮，如果已經(jīng)傳完參數(shù)，執(zhí)行函數(shù)并終止棚唆，否則遞歸curry
    return function f2(a) {
      return a.length === f.length ? f.apply(null, a) : curry(f, a);
    }([].concat(arr, args));//這種寫法是將arr和args合并后作為f2函數(shù)的參數(shù)
  };
};

compose

<pre class="markdown-highlight" style="margin: 10px 0px 0px; padding: 0px; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">簡而言之：compose 可以把類似于 f(g(h(x))) 這種寫法簡化成 compose(f, g, h)(x)</pre>

const compose = (...args) => {  
    return x => {
    let re = args.pop()(x)
     return args.length? compose(...args)(re): re
    }
}

高階函數(shù)

filter map forEach

1暇赤、減少冗余

2、配合修飾器減少代碼

3宵凌、最小化原代碼的改造幅度

npm 庫 react-decoration鞋囊，封裝了很多高階組件，可以直接配合decoration使用

@pureComponent

  validateClass(target, 'pureComponent');

  Object.setPrototypeOf(target.prototype, React.PureComponent.prototype);
  Object.setPrototypeOf(target, React.PureComponent);
}```

@debounce 

```export default function debounce(wait = 300, immediate = false) {
  return (target, key, descriptor) => {
    const userFunc = descriptor.value;

    validateFunction(userFunc, 'debounce');

    let timeout;

    return {
      ...descriptor,
      value: function debouncer(...params) {
        const callNow = immediate && !timeout;
        clearTimeout(timeout);

        timeout = setTimeout(() => {
          timeout = null;
          if (!immediate) {
            userFunc.apply(this, [...params]);
          }
        }, wait);

        if (callNow) {
          userFunc.apply(this, [...params]);
        }
      },
    };
  };
}```

@useShallowEqual

export function useShallowEqual(WrappedComponent) {
if (isFunction(WrappedComponent)) {
return (props, preProps)=>{
console.log(props, preProps);
return WrappedComponent(props);
};
} else {
class ShallowEqualEnhancer extends WrappedComponent {
shouldComponentUpdate(nextProps, nextState) {
let shouldUpdate = false;
if (!super.shouldComponentUpdate || super.shouldComponentUpdate(nextProps, nextState)) {
shouldUpdate = shallowEqual(this.props, nextProps, this.state, nextState);
}
return shouldUpdate;
}
}
ShallowEqualEnhancer.displayName = ShallowEqualEnhanced${WrappedComponent.displayName || WrappedComponent.name || 'Component'};

    return ShallowEqualEnhancer;
}

}

最后編輯于：2018.02.09 15:00:15

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者