高阶函数和高阶组件

1.先来认识一下高阶函数 高阶函数解决的问题是将某一个横切面抽象出来 下面的两个方法，是对加法add做了一次抽离，让我们所有的加法，都通过add进行运算。这样既保证了add 这个加法运算不受污染，同时还能支撑我们的一部分业务逻辑，就是其中的addFive,addTen 。

function add(p,q){
	return p+q
}

function addFive(x,fn){
	return fn(x,5)
}

function addTen(x,fn){
	return fn(x,10)
}



addFive(1,add)     // 6

addTen(1,add)     // 11

可能会问，那为什么不直接下面这样写呢？

function add(a,b){
	return a+b
}
add(1,5) //6 

的确可以，但是可以把它想象的再复杂一点,

let PEI = 1.1314926.........;
function addPEI(a,b){
	
	return a+b
}
function add2PEI(a,b){
	
	return a+2*b
}

addPEI(1,PEI)

add2PEI(1,PEI)

这个PEI 就是我们的需求，从这里就能看出来，我每次都要使用PEI，不变，比无限不循环可能还要复杂。那么在做一个类似的功能。我们还是需要处理类似于PEI ，这么复杂的需求，同样的，虽然返回的结果还是a+b 这样的加法逻辑形式（类似于 map 的for 循环）。 是不是就发现了最开始方法的好处，我们可以把这个加法逻辑给提出来，让它不受我们的业务影响，就是所谓的PEI 和2PEI?

function add(p,q){
	return p+q
}

function addPEI(a,fn){
	let PEI = 1.1314926.........;
	return fn(a,PEI)
}
function add2PEI(a,fn){
	let PEI = 1.1314926.........;
	return fn(a,2*PEI)
}

这样，我就再也不用关心PEI 有多复杂，只需要调用 addPEI，add2PEI 就可以了，PEI 可以看成项目中一段业务代码类似但是却及其复杂的一个代码块。

不过也可以看到，我们这里还是写了大量，重复的代码。上文我们提到了 PEI和2*PEI 是个复杂的逻辑，我么可以把这一部分也抽离出来。

let PEI = 1.1314926.........;

function add(p,q){
	return p+q
}

function addMaker(a,fn){
	
	return (b)=>{
    	fn(a,b)
    }
}
// let addPEI = addMaker(1,add)(PEI)
let addPEI = addMaker(1,add);
addPEI =  (b)=>{
		add(1,b)
}
addPEI(PEI) = add(1,PEI)

// let add2PEI = addMaker(1,add)(2*PEI)

到现在基本上高阶组件也差不多了， 高阶组件主要是帮我们做了两件事。 1. 复用复杂的代码，针对一块代码，通过传参的方式，对这块代码进行复用，像PEI 2. 复用复杂的逻辑，像上面的a+b 这部分逻辑

Hoc (a,fn)=>{
	return (b)=>fn(a,b)
}

Hoc(1,fn)(2)

这段代码同时帮我们做到了。即能复用逻辑，也能复用代码

2.那再来看高阶组件，是不是同样的东西 我们抽离一个组件，在多处引用，这个代码就是PEI

同一个页面使用了不同 的PEI ，但是这个页面还是a+b 的逻辑。

实例参考：高阶组件参考： map, filter, withrouter

返回高阶组件的高阶函数：参考connect(mapprops,mapstate)(List);