ReactJS 高阶组件

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

高阶组件(Higher Order Component，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。

Note−高阶组件可以用于不同的功能。这些纯函数是函数编程的本质。一旦习惯了，您会注意到您的应用程序变得越来越易于维护或升级。