React高阶组件高阶函数： 接收函数作为输入，或者输出另一个函数的一类函数； 高阶组件： 接收React组件作为输入，输出一个新的React组件的组件。高阶组件通过包裹一个新传入的React组件，经过一些逻辑处理，最终返回一个enchanted的React组件，是其他组件调用.一些前提了解知识点ReactComponent： 定义调用时的组件name function getDisplayName(component) { return component.displayName || component.name || ‘Component’; } export default function WithHOC(WrapComponent) { // 此处未定义名称 return class extends React.Component { // 定义displayName; static displayName = withHOC(${getDisplayName(WrapComponent)}); render() { console.log(‘inside HOC’); return ( return <WrapComponent {…this.props} /> ) } } } App = WithHOC(App);如果未定义displayName，那么进行调试的时候，就会显示如下： // react自动定义名称 |—_class2 |—App …定义displayName后，显示如下： |—withHOC(App) |—App …函数柯里化深入理解javascript函数进阶系列第二篇——函数柯里化koa框架实践与中间件原理解析react事件传参柯里化 Curry只传递函数的一部分参数来调用它，让它返回一个函数去处理剩下的参数函数乔明 func(params)(otherParams);在react里，通过函数柯里化,我们可以通过传入不同的参数来得到不同的高阶组件基于属性代理的方式属性代理最常见的高阶组件的使用方式，上述描述的高阶组件就是这种方式。它通过做一些操作，将被包裹组件的props和新生成的props一起传递给此组件，这称之为属性代理。import React from ‘react’;export default function withHeader(WrapperComponent) { return class extends React.Component { render() { const newProps = { test: ‘hoc’ }; // 透传props，并且传递新的newProps return ( <div> <WrapperComponent {…this.props} {…newProps} /> </div> ) } }}基于反向继承的方式这种方式返回的React组件继承了被传入的组件，所以它能够访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。具体的可以参考附录里提供的链接进行深入学习。export default function (WrappedComponent) { return class Inheritance extends WrappedComponent { componentDidMount() { // 可以方便地得到state，做一些更深入的修改。 console.log(this.state); } render() { return super.render(); } }}组合多个高阶组件上述高阶组件为React组件增强了一个功能，如果需要同时增加多个功能需要怎么做？这种场景非常常见，例如我既需要增加一个组件标题，又需要在此组件未加载完成时显示Loading.@withHeader@withLoadingclass Demo extends Component{}使用compose可以简化上述过程，也能体现函数式编程的思想。 const enhance = compose(withHeader,withLoading); @enhance class Demo extends Component{ }组合composecompose可以帮助我们组合任意个（包括0个）高阶函数，例如compose(a,b,c)回一个新的函数d，函数d依然接受一个函数作为入参，只不过在内部会依次调用c,b,a，从表现层对使用者保持透明。基于这个特性，我们便可以非常便捷地为某个组件增强或减弱其特征，只需要去变更compose函数里的参数个数便可。compose函数实现方式有很多种，这里推荐其中一个recompact.compose，详情见下方参考类库。recompact：包含了一系列实用的高阶组件库React Sortable：React拖动库深入理解 React 高阶组件：其中详细介绍了属性代理和反向继承的区别。