使用React HOC模式，为什么返回Component与返回函数相同，却返回JSX Component？

Question

我已经将React HOC定义如下，并且可以按我期望的那样工作。

function higherOrderComponent(Component) {
  return Component;
}

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

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

这与函数式编程中的身份相关吗？

Answer 1

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