Question

下面的两个示例显然导致了完全相同的代码。

示例1（与孩子互动）：

const Child = ({ item: { startedAt, count } }) => (
  <div>
    <div>{startedAt}</div>
    <div>{count}</div>
  </div>
)

const Parent = items => {
  return (
    <div>
      {items.map((item, index) => (
        <Child key={item.id} item={item} />
      ))}
    </div>
  )
}

export default Parent

示例2（功能子级）：

const child = ({ id, startedAt, count }) => (
  <div key={id}>
    <div>{startedAt}</div>
    <div>{count}</div>
  </div>
)

const Parent = items => {
  return <div>{items.map(child)}</div>
}

export default Parent

为什么要使用示例1，即React组件？函数示例有什么好处？

Answer 1

实际上，这两个代码段并不完全等效：

第一个示例是在每个渲染器（items.map中创建并返回Child元素的渲染器中）创建一个新的（且不必要的）函数，这会使垃圾回收器混乱。因此，第二个示例不仅更简洁，而且性能也更好。因此，我个人将使用第二个示例。

此外，第二个示例不会嵌套对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]),
  ...
]

还值得指出的是，第二个示例的child函数实际上也是一个无状态功能组件。您是否要使用它直接调用该函数还是通过React.createElement调用包装它取决于您，在这种情况下，我认为直接调用该函数更有意义。

Answer 2

两者都是无状态反应组件。您的第二个示例还具有react子元素- Functional Components 是无状态的React组件。这更多是关于代码的可读性，这可能是呈现子组件的语法糖。您可以在开发工具中进行检查，因为它将显示为React.CreateElement。

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

我希望这会有所帮助。

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

2 个答案: