ReactJS高阶组件

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

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

让我们看一个简单的例子来轻松理解这个概念的工作原理。的 MyHOC 是仅用于数据传递给更高阶的函数 MyComponent的 。该函数使用 MyComponent ，使用 newData 增强它并返回将在屏幕上呈现的增强组件。

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 。

反应HOC输出

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