Javascript 在react应用程序中加载页面期间加载配置数据

我正在开发一个React应用程序，它连接到一些ASP.NET核心WebAPI微服务。这些服务中的每一个都有在整个应用程序中使用的不同实体。 在完整的应用程序中，可以配置枚举和“配置数据”。 将配置数据想象成简单的表，有两个字段（Id和Value）

不同实体与配置数据具有FK关系，和/或具有枚举字段。我试图理解如何在页面加载时以性能的方式加载配置数据和所有使用的枚举，以便在下拉列表中使用它们。我还没有反应过来（1个月），所以每天都在学习

我最初采用的方法是编写一个接受WebAPI GET url的自定义下拉组件，以获取某个表或枚举的可能值，但这是非常不切实际的，而且一旦有1000个用户使用该应用程序，并且所有用户都多次调用这些api，性能就会下降，只是为了一些下拉列表

那么，在React和callapi中使用某种启动屏幕来缓存值，然后可以在其他组件中使用，建议采用什么方法呢

“我最初采用的方法是编写一个接受WebAPI GET url的自定义下拉组件”

您不应该这样做：）

在提出解决方案之前，我想先介绍几个重要的关键概念

首先

在异步操作发生（如GET）之前，render方法将始终运行一次

生命周期方法触发第一次呈现的顺序：

构造函数
=>
组件将挂载
=>
呈现
=>
组件挂载

这意味着您必须准备好所有数据，以便最初进行渲染。或者具有阻止调用某些
jsx
的条件

其次

如果您有动态内容，这将是您下拉列表中的选项，您必须从某处获取它。如果是静态的，您可以在本地定义一个列表。
如果您想保存您可以使用的响应，或者如果您正在使用redux；用于持久化存储的中间件

但我个人并不认为这样做的目的是什么，因为如果动态选项更新了，您会希望它更新应用程序状态。即使是1000个这样的简单呼叫对服务器来说也不贵

如果您使用的是redux，您应该将选项保留在那里，因为这样您就不必在每次使用下拉菜单安装组件时都进行
GET

建议：

有很多方法可以做到这一点，但这里有一个简单的解决方案）

在组件中保留一个局部状态，并在第一次渲染时对其进行初始化
this.state={dropdownpoptions:[]}

然后在
componentDidMount
中进行api调用：

fetch（url）.then（（response）=>this.setState（{dropdownpoptions:response}））

最后，在渲染方法中：

“我最初采用的方法是编写一个接受WebAPI GET url的自定义下拉组件”

您不应该这样做：）

在提出解决方案之前，我想先介绍几个重要的关键概念

首先

在异步操作发生（如GET）之前，render方法将始终运行一次

生命周期方法触发第一次呈现的顺序：
构造函数
=>
组件将挂载
=>
呈现
=>
组件挂载

这意味着您必须准备好所有数据，以便最初进行渲染。或者具有阻止调用某些
jsx
的条件

其次

如果您有动态内容，这将是您下拉列表中的选项，您必须从某处获取它。如果是静态的，您可以在本地定义一个列表。
如果您想保存您可以使用的响应，或者如果您正在使用redux；用于持久化存储的中间件

但我个人并不认为这样做的目的是什么，因为如果动态选项更新了，您会希望它更新应用程序状态。即使是1000个这样的简单呼叫对服务器来说也不贵

如果您使用的是redux，您应该将选项保留在那里，因为这样您就不必在每次使用下拉菜单安装组件时都进行
GET

建议：

有很多方法可以做到这一点，但这里有一个简单的解决方案）

在组件中保留一个局部状态，并在第一次渲染时对其进行初始化
this.state={dropdownpoptions:[]}

然后在
componentDidMount
中进行api调用：

fetch（url）.then（（response）=>this.setState（{dropdownpoptions:response}））

最后，在渲染方法中：

只是给你一个提示；我已经开始研究Redux并学习如何使用它，现在我为一些“配置”数据配置了一个存储，这些数据在初始应用加载时被缓存，可以在任何地方使用，无需额外获取。谢谢你的提示！只是给你一个提醒；我已经开始研究Redux并学习如何使用它，现在我为一些“配置”数据配置了一个存储，这些数据在初始应用加载时被缓存，可以在任何地方使用，无需额外获取。谢谢你的提示！