使用 React HOC 模式，为什么返回一个组件与返回一个 returns JSX 组件的函数相同？

Question

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

function higherOrderComponent(Component) {
  return Component;
}

我的问题是，是什么 JavaScript 原则使得返回一个 returns 相当于 JSX 的函数？

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

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

Answer 1

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

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

使用 React HOC 模式，为什么返回一个组件与返回一个 returns JSX 组件的函数相同？

Using the React HOC pattern, why is returning a Component same as returning a function the returns a JSX Component?

functional-programming

higher-order-functions

reactjs