下面的两个示例显然产生了完全相同的代码。
示例 1(React 子项):
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 组件?与函数示例相比有什么好处吗?
最佳答案
实际上,这两段代码并不完全等价:
第一个示例是在每个渲染器中创建一个新的(不必要的)函数(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
调用包装它取决于您,在这种情况下,我认为直接调用函数更有意义。
关于javascript - 函数和无状态组件之间的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52422639/