Javascript 基于prop实例化新类是否会影响react中的渲染性能

假设我们有一个对象，

redux

中的初始状态是：

const contacts={
视图模式：“基本”，
活动联系人：[
{id:1，名称：'ali'，…}，
{...}
]
}

减速器部件

触点

class选择框{
构造函数（名称、选项、/**其他参数*/）{
姓名：姓名
选项：选项
//其他道具
}
}
类SelectBoxOption{
构造函数（{name，value，/**其他参数*/}）{
名称：“”
//其他道具
}
}
类联系人扩展组件{
render（）{
const{contacts}=this.props
//选项1：使用动态对象映射道具
常量选择框={
姓名：'联系人'，
选项：contacts.map（k=>({
姓名：k.name，
价值：k.value，
/**其他道具*/
}))
}
//选项2：使用类映射
const selectBox=new selectBox（'contacts'，contacts.map（k=>new selectBox选项（k）））
回报率（…）；
}
}

---

我的问题是，两种选择都一样吗？或者

选项1

是否在深度对象的情况下提供更好的渲染性能（通过在每次组件渲染时不实例化新类）

仅在测量性能问题后进行优化。然后，只优化瓶颈。如果不想使用钩子，请选择选项2。这不是呈现react组件的建议方法，尝试使用Map呈现组件时，请使用一些缓存逻辑。在上面的示例中，您提供了“SelectBoxOption”组件，该组件每次都将创建新实例。因此，它将导致内存泄漏问题。@Yedu

SelectBoxOption

不是一个组件。老实说，创建多个类来管理这样的简单数据似乎设计过度了。在隔离此问题之前，请等待您需要它，并尝试保持代码对您自己和其他人来说简单明了，这在大多数情况下都是简单的文字。只有在您衡量了性能问题后才进行优化。然后，只优化瓶颈。如果不想使用钩子，请选择选项2。这不是呈现react组件的建议方法，尝试使用Map呈现组件时，请使用一些缓存逻辑。在上面的示例中，您提供了“SelectBoxOption”组件，该组件每次都将创建新实例。因此，它将导致内存泄漏问题。@Yedu

SelectBoxOption

不是一个组件。老实说，创建多个类来管理这样的简单数据似乎设计过度了。在隔离此代码之前，请等待您需要它，并尝试保持代码对您自己和其他人来说简单明了，这在大多数情况下都是简单的文本。