React 功能组件中使用参数代替 Props

Question

这个函数是正确的 React 函数组件吗？或者为什么我应该使用props对象？

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

我看到的唯一区别是调用此函数：

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

Answer 1

函数组件是返回元素的函数JSX。

这是一个作为普通函数调用的函数组件。

但在这种情况下，还没有调用 with React.createElement。

因为 JSX 是 的语法糖，所以React.createElement您需要使用 JSX 语法调用该函数，如下所示：

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

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

如果不调用React.createElement，React 将不会知道该组件（用于状态更新、比较算法等），因为它只是一个普通的函数调用。

另一个主要问题是函数参数：

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

React.createElement接受一个参数，即组件的 props。

• React.createElement应用程序编程接口

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

Answer 2

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

被使用就像

{StyledLabel(value, cssClass)}

不是传统的功能组件，而是返回 JSX 的函数。

如果遵循这样的语法，您将无法利用函数组件的某些功能，例如使用React.memo.

尽管您仍然可以在功能组件中使用钩子。

使用这种语法的另一个缺点是，您无法像使用以下语法那样轻松地将子组件添加到 StyledLabel

<StyledLabel>
    <SomeChild/>
</StyledLabel>

虽然 React 内部也通过调用它来调用该函数，并且 JSX render 只是一个Syntactic Sugar用于React.createElement转换它的 a，但它为您提供了一种使组件成为 Virtual DOM 的一部分的方法，而不是其返回值成为 virtual dom 的一部分