Javascript 在JSX中调用组件的不同方式有哪些？

如果我在jsx中这样调用/调用组件：

function arrow(){
  return ( 
    <div>Cool arrow</div>
  )
}

return (
  <div className="container">
      {arrow()}
  </div>  
)

函数箭头（）{
报税表（
酷箭
)
}
返回(
{arrow（）}
)

VS

const Arrow=（）=>{
报税表（
酷箭
)
}
返回(
)

有什么区别需要注意吗？它们都是同一文件中的组件，但我注意到状态的行为不同？

存在差异

此处

箭头

是一个反应组件。不过，在定义它时要小心。如果在另一个React组件中定义

箭头

，则每次外部组件渲染时都会重新创建该箭头<代码>箭头将在每次渲染外部组件时重新加载，因此可能会产生一些意外的副作用。如果执行此操作，请确保在任何其他组件之外声明

箭头

它们都在同一个文件中，但我注意到了状态
行为不同

我在这两个代码段中都没有看到使用任何状态，因此很难解决这个问题，但我认为任何状态问题都可能与上面描述的重新声明/重新装载问题有关。新组件===安装时的新初始状态

在JSX中调用组件的不同方式有哪些

您不直接调用React组件，而是在JSX中对它们进行模板化，并将React句柄转换为可调用函数，并维护组件生命周期

const Arrow = () => {
  return ( 
    <div>Cool arrow<div>
  )
}

return (
  <div className="container">
      <Arrow />
  </div>  
)

function arrow(){
  return ( 
    <div>Cool arrow</div>
  )
}

return (
  <div className="container">
    {arrow()}
  </div>  
)

const Arrow = () => {
  return ( 
    <div>Cool arrow<div>
  )
}

return (
  <div className="container">
    <Arrow />
  </div>  
)