Javascript 在React.js中实现自己的本地化引擎-值得吗？

我决定使用react钩子编写自己的本地化引擎。 我不需要太多的本地化，只想根据所选的地区显示消息。 我有一些关于性能等的问题

这是我的翻译组件，它仅通过给定的键返回消息：

import React from 'react';
import useLocale from 'store/LocaleContext';

export default ({ k }) => {
  const { messages } = useLocale();

  const msg = messages[k] ? messages[k] : k;

  return <>{msg}</>;
};

从“React”导入React；
从“store/LocaleContext”导入useLocale；
导出默认值（{k}）=>{
const{messages}=useLocale（）；
const msg=消息[k]？消息[k]：k；
返回{msg}；
};

正如您所看到的，它使用react钩子，我在上下文提供程序中异步加载了消息

我的应用程序是中型项目，因此我计划在其中使用50-100个或更多的

组件

如果有这么多组件订阅了一个提供了大约5-6KB数据的上下文，是否会影响我的应用程序性能？（我的意思是消息的大小大约为5-10KB）

如果我忽略其他本地化问题（日期、时间、货币、数字…，仅用于消息），使用此引擎而不是

react intl

或

react-i18n

，是否好

---

编辑：

这是示例代码沙盒链接

您可以看到我创建的整个本地化文件

---

我还添加了translate函数，它不返回组件，只返回已翻译的消息。这样做是一种好的做法吗？

使用上下文可能会遇到的问题是，每次提供程序更新时，它都会呈现。每次组件渲染其子组件时，也会渲染（除非它们已被记忆）

在你描述的情况下，我可以想到两种情况

是否同时加载所有邮件

如果是这种情况，您将有一个初始渲染，并在获取数据后进行另一个渲染。从这一点起，数据将不会更改，并且提供程序将不会触发新的渲染

消息是否已更新/添加多次

在这种情况下，每次提供程序更新其所有子级时，都将呈现。如果有很多孩子并且没有被记忆，这可能是一个问题

如果您的案例是第一个，我将测试在上下文中管理数据是否存在任何问题

在第二种情况下，您可能需要考虑其他选项，如使用ReDux代替上下文或可能建议的库之一。

---

在这两种情况中，如果您在单个对象中管理大量信息，您可能会考虑使用不同的上下文，并将较小的数据集提供给应用程序的不同部分。

i编辑的帖子，包含CODESABDBOX链接。您可以根据需要对其进行分叉和测试。消息是静态json文件，它们从不被添加/更新，也不会同时加载。只有当用户更改语言时，上下文才会一次提供一个消息文件。谢谢@MalkhaziDartsmelidze。在真实的情况下，这些对象是从某个url获取的，还是您只是从一个文件导入它们？它们是从文件导入的，我认为从文件导入还是从其他文件导入并不重要api@MalkhaziDartsmelidze检查。这只是一个需要改进的基本实现。您可以看到，现在上下文只处理语言代码，消息对象从模块导入并在组件内部使用。@MalkhaziDartsmelidze check，它描述了一种非常类似的情况以及处理它的替代方法。