在 JavaScript 和 React 中使用地图简化代码

逃离我推掉我的手 2023-09-26 23:59 87阅读 0赞

在 JavaScript 中，开发人员经常会遇到需要根据各种条件返回不同结果的情况。一种这样的情况是，当他们想要基于某些可以切换的状态变量在组件内呈现不同的 JSX 时。但是，代码最终可能会变得重复且难以维护，尤其是当条件数量增加时。在这篇博文中，我们将探讨如何在 JavaScript 中使用Map数据结构来简化和优化代码。我们将从查看数据卡组件的示例开始，以及如何使用Mapinstead ofif/else或switch语句重构它。最后，我们还将讨论Map和之间的差异Object，以及Map提供 vs 的优势Object。

条件渲染  
在 React 中，当需要根据不同的条件返回不同的结果时，代码通常会像这样结束：

jsx  
复制  
const DataCard = (\{ data \}) => \{  
const \[cardType, setCardType\] = useState(“sessions”);  
const Icon = cardType === “sessions” ? IconSession : IconPost;  
const title = cardType === “sessions” ? “Daily user sessions” : “Post data”;  
return (

<Button  
onClick=\{() =>  
setCardType(type => (type === “sessions” ? “post” : “sessions”))  
\}  
>  
Switch view

### \{title\} ###

\{data\[cardType\].map(item => (

\{item.name\}

\{item.data\}

))\}

);  
\};  
在这个简单的示例中，我们有一个数据卡作为分析仪表板的一部分，具有预定义的样式和布局。sessions该卡使用户能够在和数据之间切换post。唯一改变的元素是卡片图标和标题，因此引入cardType布尔值是合乎逻辑的。此布尔值确定要呈现的适当图标和标题，以及要根据切换显示的正确数据类型。

除了代码的重复性之外，这种方法还有另一个问题。想象一下，我们的组件现在需要显示一个额外的数据类型，pageViews. 在这种情况下，我们首先需要将切换按钮重构为包含