高阶函数

要理解高阶组件首先要知道什么是高阶函数，
高阶函数就是 参数是函数 或者 函数的返回值是函数 的函数

  1. Array.prototype.sort();
  3. ;(function(){
  4.   return function(){
  5.   }
  6. })();

理解高阶函数

参数是函数

业务能够抽离成为函数
函数是一个功能的抽象，根据函数单一性的原则：一个函数只做一件事情。

以下面的伪代码为例：

  1. var getUserInfo = function(userId, cb){
  2.     $.ajax({
  3.       url: 'http://xxxxx.com/userId',
  4.     data; userId,
  5.     success: cb
  6.   });
  7. }
  9. getUserInfo('123', function(data){
  10.     console.log(data);
  11. })

一个函数只做一件事情， getUserInfo 请求一个 Ajax。如果修改为不用 cb 回调函数为参数，而是直接在 success 写其对应的回调逻辑。这样的操作是可以，但是会发现一个问题。这样的修改会使 getUserInfo 违背了函数的单一性原则，做了两件事情。
所以才使用 cb，把业务处理的函数抽离出去。做了一个函数只做一件事情。

返回值是函数

函数是对功能的延续

  1. var isString = function(obj){
  2.     return {}.toString.call(obj) === '[object String]';
  3. }
  5. var isArray = function(obj){
  6.     return {}.toString.call(obj) === '[object Array]';
  7. }
  9. var isNumber = function(obj){
  10.     return {}.toString.call(obj) === '[object Number]';
  11. }

这样虽然一个函数只做一件事情，但是其实函数大部份代码是相同的，复用程度相当之低。

所以再封装一层

  1. var isType = function(type){
  2.     return function(obj){
  3.       return {}.toString.call(obj) === '[object ' + type + ']';
  4.   }
  5. }
  7. var isString = isType('String');
  8. var isArray = isType('Array');
  9. var isNumber = isType('Number');

函数的返回还是函数，相当于把函数的功能作扩展延续了。返回了 function，后面还是可以继续调用。

理解高阶组件

高阶组件 (HOC) 是 React 中用于复用组件逻辑的一种高级技巧 HOC 自身不是 React API 的一部份，它是一种基于 React 的组合 特性而形成的设计模式。

高阶组件无非就是高阶函数，只不过其参数 或 返回值 是组件而已。