React 函数式组件中的参数而不是 Props

Question

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

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

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

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

Answer 1

函数组件是returnsJSX元素的函数。

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

但在这种情况下尚未使用 React.createElement 调用。

因为 JSX 是 syntactic sugar for 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 API

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

Answer 2

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

像

一样被使用

{StyledLabel(value, cssClass)}

不是传统的功能组件，而是 return JSX 的功能。

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

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

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

<StyledLabel>
    <SomeChild/>
</StyledLabel>

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

的一部分

React 函数式组件中的参数而不是 Props

Arguments instead of Props in React Functional Component

arguments

jsx

reactjs

react-functional-component