使用 React HOC 模式，为什么返回一个组件与返回一个函数返回一个 JSX 组件一样？答案

【问题标题】：Using the React HOC pattern, why is returning a Component same as returning a function the returns a JSX Component?使用 React HOC 模式，为什么返回一个组件与返回一个函数返回一个 JSX 组件一样？
【发布时间】：2020-04-22 15:49:59
【问题描述】：

我有一个定义如下的 React HOC，它可以按我的预期工作。

function higherOrderComponent(Component) {
  return Component;
}

我的问题，是什么 JavaScript 原理使得返回一个返回 JSX 等效函数的函数？

function higherOrderComponent(Component) {
  return function () {
    return <Component></Component>;
  };
}

这是否与函数式编程中的身份有某种关系？

【问题讨论】：

你熟悉函数组件吗？因为第二个例子是制作其中一个然后返回它。 reactjs.org/docs/…
他们不一样，第二个忽略了道具。第一个是 id 函数（返回传入的内容：id=>id）。第二个返回一个忽略 props 的功能组件，并在没有 props 的情况下呈现 Component。

标签： reactjs functional-programming higher-order-functions

【解决方案1】：

不，它不涉及任何复杂的原理或魔法。在第一个示例中，您将返回一个组件对象本身而不渲染它。在第二个示例中，您将返回一个函数组件，该组件返回原始组件的渲染版本（这在编写 HOC 时更为常见，因为它允许您进行更多修改，例如将组件包装在 div 中）。只要组件不带参数，两者的最终结果是相同的。如果它确实需要参数，您可能希望您的第二个示例是这样的：

function higherOrderComponent(Component) {
  return function(props) {
    return <Component {...props} />;
  };
}

【讨论】：