React Component vs function，我应该使用什么，为什么？

Question

在文件 user.js 中有 React 中的这两个示例，其中 User 是导出的组件

const displayText = (firstName, lastName) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     {displayText(user.firstName, user.lastName)}
  </div>
)

或

const DisplayText = ({ firstName, lastName }) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
  </div>
)

哪个更好、更快或更推荐？

稍后编辑：我添加了另一个我经常看到的例子，除了看起来有点难看之外，我无法告诉人们为什么错了

const User = ({ user }) => {
   const DisplayText = ({ firstName, lastName }) => (
     <div>{firstName} {lastName}</div>
   )

  return (
    <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
    </div>
  )
)

Answer 1

当 React 组件编译为 React.createElement(component) 时。虽然功能保持不变。我觉得使用它们中的任何一个都没有发现任何性能问题（尚未）。

使用函数本身的一些优点是，您可以使用柯里化等函数式编程技术。另外，在函数中传递参数时不命名参数。

函数唯一的小缺点是，如果你有超过 5 个参数，顺序很重要，如果你必须在某个地方调用函数，只需要传递第 5 个参数，你必须传递前四个的默认参数。

您可能会发现这也很有帮助。 React functional component vs. plain-old JS function that returns React element

React Component vs function，我应该使用什么，为什么？

React Component vs function, what should I use and why?

components

function

reactjs