通过对象字面量渲染 React 组件答案

【问题标题】：Rendering React components via object literal通过对象字面量渲染 React 组件
【发布时间】：2023-01-11 05:22:07
【问题描述】：

渲染像这些选项这样的反应组件在性能方面是否有任何缺点？

更具体的选项#1：

将图标对象放在函数之外，甚至可能放在组件之外会更好吗？

// option #1
const renderIcon = iconName => {
   const icons = {
       iconX: <IconX />,
       iconY: <IconY />,
       iconZ: <IconZ />,
   };
   return icons[iconName];
};

return <div>{renderIcons('iconX')}</div>


// option #2
const icons = useMemo(() => ({
    iconX: <IconX />,
    iconY: <IconY />,
    iconZ: <IconZ />,
}), [props.iconName]);

return <div>{icons[props.iconsName]}</div>

【问题讨论】：

您不必将 props.iconName 传递给依赖项数组。最好将此对象完全移出组件。
使用这种方法，您最终会将所有这些图标都放在一个客户端包中，而如果您担心性能，那么在需要时lazy-loading他们会好得多。此外，您应该小心使用 useMemo()，因为在某些情况下您可能会以性能方面的方式结束 loosing。
@KonradLinkowski 谢谢，但是你能解释一下把它移到外面有什么好处吗？
该对象只创建一次，而不是现在发生的每次渲染。

标签： javascript reactjs

【解决方案1】：

说到性能，有一个缺点，因为所有组件的功能都会被执行，包括不渲染的组件。虽然可读性差一些，但是从性能的角度来看，做一个switch或者三元渲染会更好。

【讨论】：