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 .

React HOC Output