箭头函数 vs Component React

Question

我最近在我的公司提出了一个拉取请求，并得到了对我编写的一些代码的反馈，我想就此提出一些其他意见。我们有一个名为 Icon 的组件，它可以像这样将另一个组件作为 prop：

<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 的选项。

Arrow function vs Component React