Javascript 函数和无状态组件之间的区别？

下面的两个示例显然产生了完全相同的代码

示例1（反应子对象）：

const Child=（{item:{startedAt，count}}}）=>(
{startedAt}
{count}
)
常量父项=项=>{
返回(
{items.map（（项，索引）=>(
))}
)
}
导出默认父级

示例2（函数子项）：

const child=（{id，startedAt，count}）=>(
{startedAt}
{count}
)
常量父项=项=>{
返回{items.map（子项）}
}
导出默认父级

---

为什么要使用示例1，即反应组分？与函数示例相比有什么好处吗？

两者都是无状态组件。您的第二个示例还包含react子组件-功能组件是无状态react组件。这更多的是关于代码可读性，这可能是呈现子组件的一种语法糖。您可以在开发工具中进行检查，因为它会将它们显示为

React.CreateElement

我宁愿举第一个例子。它清楚地表明存在子组件

---

我希望这有帮助

实际上，这两段代码并不完全相同：

第一个示例是在每个渲染中创建一个新的（而且是不必要的）函数（在

items.map

中创建并返回

子元素的函数），这会使垃圾收集器变得混乱。因此，第二个示例不仅更加简洁，而且性能也更好。所以，我个人会选择第二个例子

另外，第二个示例不会嵌套对
React.createElement
的不必要调用。这意味着map函数将返回如下内容：

[
  React.createElement('div', {key: items[0].key},
    React.createElement('div', null, items[0].startedAt),
    React.createElement('div', null, items[0].count)
  ),
  React.createElement('div', {key: items[1].key},
    React.createElement('div', null, items[1].startedAt),
    React.createElement('div', null, items[1].count)
  ),
  ...
]

另一方面，第一个例子是这样的：

[
  React.createElement(Child, {key: items[0].key}, items[0]),
  React.createElement(Child, {key: items[1].key}, items[1]),
  ...
]

还值得指出的是，第二个示例中的
子函数实际上也是一个无状态函数组件。您是想直接调用函数还是通过React.createElement调用包装函数来使用它取决于您，在这种情况下，我认为直接调用函数更有意义。
区别不仅仅在于“代码可读性”，第一个示例是创建新的（不必要的）每个渲染中的函数，这会使垃圾收集器变得混乱。第二个例子性能更好，而且我个人觉得它更干净。谢谢@Josep。但他们都是孩子。对吗？抱歉@sakhi mansoor，但我真的不明白你的问题。我的意思是两个孩子都是反应元素。哦，我明白了，那么不，我认为你错了。第二个例子不会创建“child”元素，你知道我的意思吗？因此，第二个示例将为每个子级减少一级嵌套元素。
[
  React.createElement('div', {key: items[0].key},
    React.createElement('div', null, items[0].startedAt),
    React.createElement('div', null, items[0].count)
  ),
  React.createElement('div', {key: items[1].key},
    React.createElement('div', null, items[1].startedAt),
    React.createElement('div', null, items[1].count)
  ),
  ...
]

[
  React.createElement(Child, {key: items[0].key}, items[0]),
  React.createElement(Child, {key: items[1].key}, items[1]),
  ...
]