Используя шаблон React HO C, почему возврат компонента так же, как возврат функции, возвращает компонент JSX?

Question

У меня есть React HO C, определенный следующим образом, и он работает так, как я и ожидал.

function higherOrderComponent(Component) {
  return Component;
}

Мой вопрос: из-за чего принцип JavaScript возвращает функцию, возвращающую JSX? эквивалентно?

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

Это как-то связано с идентичностью в функциональном программировании?

Answer 1

Нет, это не включает никаких сложных принципов или маги c. В первом примере вы возвращаете сам компонентный объект без его рендеринга. Во втором примере вы возвращаете функциональный компонент, который возвращает визуализированную версию исходного компонента (это гораздо чаще встречается при написании HOC, так как позволяет вам делать больше модификаций, таких как упаковка компонента в div). Конечный результат обоих одинаков до тех пор, пока компонент не принимает аргументов. Если бы он принимал аргументы, вы бы хотели, чтобы ваш второй пример был таким:

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