高级组件

高阶组件是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

函数模拟高级组件

先用两个普通方法welcome和goodbye，一个函数先从localstorage读取username，然后对username做了一些处理 我们可以以很清楚的看到，上面两个函数，有一句代码是一样的，现在我们要写一个中间函数，读取username，它来负责把username传递给两个函数。

在上面的wrapWithUsername函数就是一个高阶函数，他帮助我们处理了username，传递给木变函数，我们调用最终的函数welcome和goodbye的时候，根本不用担心，username是怎么来的

例如如果我们增加一个study函数

这样的话，是不是就浅而已见的理解了为什么说wrapWithUsername函数就是一个高阶函数，因为wrapWithUsername函数包装了我们的study函数后，study函数得第一个参数就是username。

高级组件

我们先在把之前的函数变成react组件

普通函数

用了高阶组件以后先用高阶组件把相同的提取出来。

这样的话我们就可以简化我们的welcome组件和goodbye组件

因为高阶组件就是把username通过props传递给了目标组件，目标组件只管从props里面拿来用就好了。

react-redux

理解一下react-redux的connect函数

把redux的state和action创建函数，通过props注入给了component。

你在目标组件component里面可以直接用this.props去调用redux state和action创建函数了

ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);

相当于

connect是一个返回函数的函数就是一个高阶函数

const enhance = connect(mapStateToProps, mapDispatchToProps);

返回的函数就是一个高阶组件，该高阶组件返回一个与redux store关联起来的新组件

const ConnectedComment = enhance(Component);

antd和Form也是一样的。

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);