Аргументы вместо свойств в функциональном компоненте React

Question

Верна ли эта функция в функциональном компоненте React? Или зачем мне использовать объект props?

function StyledLabel(value, cssClass){
   return <span className={cssClass}>{value}</span>
}

Единственное различие, которое я вижу, заключается в вызове этой функции:

<App>
   {StyledLabel(value, cssClass)}
</App>

Answer 1

function StyledLabel(value, cssClass){
   return <span className={cssClass}>{value}</span>
}

используется как

{StyledLabel(value, cssClass)}

- это не традиционный функциональный компонент, а функция, возвращающая JSX.

Если вы будете следовать такому синтаксису, вы не будете возможность использовать некоторые функции функционального компонента, например, React.memo.

Хотя вы все равно можете использовать хуки в функциональном компоненте.

Другой недостаток использования такого синтаксиса заключается в том, что вы не можете легко добавить дочерние компоненты в StyledLabel, как это делается со следующим синтаксисом

<StyledLabel>
    <SomeChild/>
</StyledLabel>

Хотя внутри React тоже вызывает функцию, вызывая ее, а рендеринг JSX - это всего лишь Syntactic Sugar, который использует React.createElement для транспиляции, но дает вам способ сделать компонент частью Виртуальный DOM вместо его возвращаемого значения является частью виртуального dom

Answer 2

Функциональный компонент - это функция, которая возвращает JSX элемент.

Это Функциональный компонент , который вызывает как обычную функцию.

---

Но в этом случае он не был вызван с помощью React.createElement.

Поскольку JSX - это синтаксис c сахар для React.createElement, вам необходимо вызвать функцию с помощью JSX синтаксис выглядит следующим образом:

function StyledLabel({ value, cssClass }) {
  return <span className={cssClass}>{value}</span>;
}

<App>
  <StyledLabel value={value} cssClass={cssClass} />
</App>

Без вызова React.createElement React не будет знать о компоненте (для обновлений состояния, алгоритм сравнения и т. д. c.), так как это будет обычная функция вызов.

Еще одна серьезная проблема - аргументы функции:

// Not function StyledLabel(value, cssClass)
function StyledLabel(props)

React.createElement принимает единственный аргумент, который является реквизитом компонента.

• React.createElement API

React.createElement(
  type,
  [props],
  [...children]
)