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 的逻辑。