ReactJS高阶组件

高阶组件是用于向现有组件添加附加函数的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。

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