理解 React 高阶组件

Question

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

• 如果 HOC 创建了一个新的增强组件，是否有可能根本不传入任何组件作为参数？
• 在诸如this的示例中，它是高阶组件，Button或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

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

Answer 1

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

如果 HOC 创建了一个新的增强组件，是否有可能根本不传入任何组件作为参数？

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

在这样的示例中，它是高阶组件，即 Button 或 EnhancedButton。

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集传递给true它，它将不会呈现...因此我们增强了a组件的默认行为，您可以使用任何其他组件来执行此操作。

在许多情况下，HOC 函数是柯里化的，而 Component arg 放在最后......像这样：

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

就像connectreact-redux的功能……这使得组合更容易。看看recompose。