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