使用常量数据反应最佳实践

Posted 2023-02-19

【中文标题】使用常量数据反应最佳实践

【英文标题】：React best practices using constant data

【发布时间】：2020-05-13 21:03:33

【问题描述】：

我正在尝试找出保存 UI 中所需的常量数据的最佳做法。 数据库存储了我在我的 react 项目中显示的大量数据，例如，假设数据库是工作数据库，其中包含大量员工数据（类型、联系人、个人信息等）。

我需要用特定颜色和背景颜色显示每个工人的类型。 例如，对于普通工人，我希望颜色为#e7d2ec，背景为#990098 而对于承包商，我希望它是#f6d2d5 和#fb5658。 我有很多类型的工作，我的数据库表中有这些类型。

我的问题是：我在哪里存储配色方案？

1) 在 DB 内部，包含工作人员类型及其颜色的新表。

2) 在 react 常量文件里面？

3) 别的什么？

我选择了 2 号。到目前为止，我所做的是：

在我的 react 项目中创建了新常量：

然后在我的 css 中，我使用提供的道具来知道选择哪种颜色

这就是结果

但有人告诉我这不是最佳做法，因为如果创建了新状态，我需要在代码中进行更改，而不仅仅是更改数据库。

在数据库中仅存储 UI 相关数据感觉不对，因为它不是为我的后端应用程序服务的东西，但我不确定它是否正确。

你怎么看？ 提前致谢

【参考方案1】：

这取决于你的情况：

如果您的用户可以自行更改颜色并使用自定义颜色：将其存储在 DB 中。

如果您的列表不经常更改：保留在 React 常量文件中。

如果您的列表经常更改并且用户无法使用自定义颜色：视情况而定。

如果只有开发人员可以添加新颜色：

保留在 React 常量文件中。

如果您的颜色可以由其他人添加：

将其存储在 DB 中。

【讨论】：

你能解释一下为什么吗？对我来说，开发人员是唯一可以改变颜色或增加新工作类型的人。此外，该列表不会经常更改。所以我想我选择了正确的方法。但这是为什么呢？我是凭感觉做的。

仅仅是因为您选择了需要最少资源才能做到这一点的方法。假设您选择 DB 中的存储：对于您的需求，这将是矫枉过正，因为您将添加与后端的依赖项并在前端执行 API 调用以获取数据。 “正确”的方法将是一种需要较少资源同时满足您现在和将来的目标的方法，因为我们的开发人员很懒惰。