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

Question

以下两个示例显然导致完全相同的代码.

示例1(React child):

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

实际上,这2个代码片段并不完全等效:

第一个例子是在每个渲染(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调用包装它都取决于你,在这种情况下我认为直接调用函数更有意义.