高阶组件是用于向现有组件添加附加函数的javascript函数。 这些函数是纯粹的，这意味着他们接收数据并根据这些数据返回值。 如果数据改变，高阶函数会以不同的数据输入重新运行。 如果我们想更新返回组件，不必更改hoc。 所要做的就是改变函数使用的数据。

高阶组件(hoc)环绕“正常”组件，并提供额外的数据输入。 它实际上是一个函数，它接受一个组件并返回包装原始组件的另一个组件。

下面来看看一个简单的例子，以便理解这个概念是如何工作的。 myhoc是一个高阶函数，仅用于将数据传递给mycomponent。 这个函数使用mycomponent，用newdata增强它，并返回将在屏幕上呈现的增强组件。

文件：app.jsx -

import react from 'react';

var newdata = {
   data: 'data from hoc...',
}

var myhoc = composedcomponent => class extends react.component {

   componentdidmount() {
      this.setstate({
         data: newdata.data
      });
   }

   render() {
      return <composedcomponent {...this.props} {...this.state} />;
   }
};


class mycomponent extends react.component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default myhoc(mycomponent);

如果运行应用程序，会看到数据被传递给mycomponent。

注 - 高阶组件可以用于不同的功能。 这些纯函数是函数式编程的本质。当习惯了它，你会注意到应用程序变得更容易维护或升级。