了解 React 高阶组件

有人可以解释一下 React 中的高阶组件吗？我已经阅读并重新阅读了文档，但似乎无法更好地理解。根据文档，HOC 通过创建一个返回 React 组件的主函数，并将参数传递给该函数来帮助消除重复。 我对此有几个问题。

• 如果 HOC 创建一个新的增强组件，是否可以完全不传入任何组件作为参数？
• 在一个例子中，例如this https://stackoverflow.com/questions/37847616/proptypes-on-higher-order-components，这是高阶分量，Button or the EnhancedButton.

• 我尝试创建一个 HOC，如下所示：

  // createSetup.js
  import React from 'react';
  
  export default function createSetup(options) {
      return class extends React.Component {
          constructor(props) {
              super(props);
  
              this.state = {};
  
              this.testFunction = this.testFunction.bind(this);
          }
  
          testFunction() {
              console.log("This is a test function");
          }
  
          render() {
              return <p>{options.name}</p>
          }
      }
  }
  
  
  // main.js
  import React from 'react';
  import {render} from 'react-dom';
  import createSetup from './createSetup';
  
  render((<div>{() => createSetup({name: 'name'})}</div>),
          document.getElementById('root'););
  

运行此命令不会显示 HOC，仅显示div

任何人都可以帮忙提供一个比给出的例子更好的例子吗？

HOC 是一个function它将组件作为其参数之一，并以某种方式增强该组件。

如果 HOC 创建一个新的增强组件，是否可以完全不传入任何组件作为参数？

不，那么它就不是 HOC，因为条件之一是它们将组件作为参数之一，并且返回一个具有一些附加功能的新组件。

在这样的示例中，它是较高阶组件、按钮或增强按钮。

EnhanceButton是 HOC 并且FinalButton是增强组件。

我尝试创建一个 HOC，如下所示：...运行此命令不会显示 HOC，仅显示 div

那是因为你的createSetup函数不是 HOC...它是一个返回组件的函数，是的，但它不会将组件作为参数来增强它。

让我们看一个基本 HOC 的示例：

const renderWhen = (condition, Component) =>
  props => condition(props)
    ? <Component {...props} />
    : null
);

你可以这样使用它：

const EnhancedLink = renderWhen(({invisible}) => !invisible, 'a');

现在你的EnhancedLink会像一个a组件，但如果你传递属性invisible set to true它不会渲染...所以我们增强了默认行为a组件，您可以使用任何其他组件来做到这一点。

在许多情况下，HOC 函数都是柯里化的，并且组件参数放在最后......就像这样：

const renderWhen = condition => Component =>
  props => condition(props)
    ? <Component {...props} />
    : null
);

像connectReact-Redux 的功能...这使得组合变得更容易。看一下重组 https://github.com/acdlite/recompose.