高阶函数

高阶函数是指这样一种函数：接收函数作为参数，或将函数作为参数，或将函数作为输出返回。在前面的内容中介绍了使用map()函数实现列表渲染的例子，实际上就是用JavaScript内置的高阶函数实现的。 理解了高阶函数的定义，那么它有何价值和作用呢？它的目的和组件拆分类似：将复杂逻辑拆分成可复用的更小的逻辑单元。

高阶函数的典型用法如下：

const add = x => y => x + y
console.log(add(1)(2))     // 3

上面代码看起来晦涩难懂，因为使用es6箭头函数进行了简写，经过babel转换后，代码看起来就直观易懂了。

var add = function add(x) {
    return function(y) {
        return x + y
    }
}
console.log(add(1)(2)    // 3

高阶组件

高阶函数本质上就是一个函数，特殊的是它的接收值和返回值都是函数。类似地，高阶组件本质上也是一个函数，特殊的是它的接收值和返回值都是组件。

例如，需要给每个组件添加值为ok的status属性，可以定义一个Container高阶组件，代码如下：

const Container = e => {
    class extends React.Component {
        return () {
            let newProps = { status: 'ok' }
            return <e { ...this.props }{ ...newProps } />
        }
    }
}

上述实现方式称为属性代理，高阶组件在render()函数中返回了传入的React组件，并且可以传递和添加新的属性（Props）

props在React中可以使用它进行组件之间的参数传递。

属性代理实现的高阶组件使用起来也十分简单，只需用高阶组件包裹起来，然后正常调用即可。例如，返回hello world的app组件，代码如下：

export default class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}

使用高阶组件Container向app组件添加值为ok的status属性，代码如下：

class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}
export default Container(App)

此时，调用该组件的写法没有任何的改变，代码如下:

import App from "./App"
ReactDOM.render(<App />, document.getElementById('root')

另外，还可以通过es6新增的装饰器(decorator)进一步简化高阶组件的调用。

@Container
export default class App extends React.Component {
    render() {
        return (
            <div>hello world</div>
        )
    }
}

装饰器是一种与class类相关的语法，用来注释或修改类和类方法。它作用的对象是一个类或其他属性方法，在不改变原有功能的基础上增强其功能。

一般来说，高阶组件主要用于控制组件的属性和状态，以及渲染劫持（为组件添加统一的样式或布局等）.

最后

公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭