箭头函数 vs 组件 React

Question

我最近在我的公司提出了一个拉取请求，并得到了关于我编写的一些代码的反馈，我想就此发表一些其他意见。我们有一个名为的组件Icon，它可以将另一个组件作为道具，如下所示：

<Icon component={ArrowDown}/>

这只是呈现以下内容：

<IconContainer>
    <ArrowDown/>
</IconContainer>

现在，如果您需要创建自定义图标，您还可以执行以下操作：

<Icon component={()=><div>custom Icon</div>}/>

审稿人评论说，()=><div>custom Icon</div>出于性能原因，该函数应该在范围之外移除，以防止重新渲染：

const CustomIcon = ()=><div>custom Icon</div>
const someComponent = ()=><Icon component={customIcon}/>

我不相信这会提高性能（代码可读性肯定），但想得到一些其他的意见。谢谢！

Answer 1

箭头函数anonymous将在每次渲染时重新实例化。

如果你创建了一个命名组件，它将有一个引用并且不会被 React 重新渲染，除非并且直到需要（通过状态更新）。

而且，正如您所提到的，它readability为code splitting.