一、高阶函数（Higher-Order Function）

在javascript中，函数是一等公民。函数可以作为另一个函数的参数传递。高阶函数，是在一个函数里面返回一个函数。 我要用到a函数实现a与b相加的功能。

var a=function(a,b){
 	return a+b
}
a(1,2)

现在用高阶函数把两个参数分开传入。这个时候用const就会失效，const受到了{}的限制。这种方式称为柯里化。

var b=function(a){
 return function(b){
     return a+b
     }
}
b(1)(2)

//计算本金和利息
var sum =function（principal){
 return function(interest){
   return principal+princlipal*interest
 }
}
sum(30000)(.61)

//定义本金
var _3w=sum(30000)

_3w(061)

二、高阶组件（Higher-Order Component）

利用组件传入组件，可以实现相当于vue中的插槽功能，切记高阶组件的第一层必须是一个函数组件。也就是说在一个组件中，外层用组件函数内层可以随意选择，这时候外层的函数组件就成为了一个普通的函数。

高阶组件的使用方法和高阶函数相同，将一个组件作为另一个组件的入参，这个时候需要创建两个js演示 首先在pages包下面创建一个layout组件包其中含有一个MainLayout.js文件还有一个index.js。 在MainLayout中，将外层函数组件作为函数，返回两个参数用类组件。

import React, { Component } from 'react'

 const MainLayout = Childrencomponrnt=>{
     return title=>{
        return class Layout extends Component {
                render() {
                    return (
                        <div>
                            <header>{title}</header>
                            <hr/>
                            <content>
                                <Childrencomponrnt/>
                            </content>
                            <hr/>
                            <footer>
                                这个是尾部的版权哦 &copy;
                            </footer>
                        </div>
                    )
                }
            }
     }
   
    
}
export default MainLayout

在index中，写一个类组件，将整个类组件作为一个参数传入

import React, { Component } from 'react'
import MainLayout from './Layout/MainLayout.js'

class One extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

// 这里是把One作为一个参数传入
export default MainLayout(One)('传参的标题')

然后添加个样式 最后的结果 样式部分需要注意的是，在用less的写法中calc("")的里面一定要添加，才能实现计算。>是less的子元素选择器。