我正在开发一个React应用程序，该应用程序已连接到一些ASP.NET Core WebAPI微服务。这些服务中的每一个都有在整个应用程序中使用的不同实体。 在完整的应用程序中，可以配置枚举和“配置数据”。 将配置数据想象成只有两个表（Id和Value）的简单表。
不同的实体与配置数据具有FK关系，并且/或者具有枚举字段。我试图了解如何以高性能的方式在页面加载时加载配置数据和所有使用的枚举，以便可以在下拉列表中使用它们。我对React还是很陌生（1个月），所以仍然每天都在学习。
我最初采用的方法是编写一个接受WebAPI GET url的自定义DropDown组件，以获取某个表或枚举的可能值，但是这是非常不切实际的，并且一旦存在，将证明它的性能不那么强1000个用户正在使用该应用程序，并且多次对这些api进行调用，仅用于某些下拉菜单。
那么，建议在React AND调用API中使用某种初始屏幕来缓存值，然后将其用于其他组件的建议方法是什么？
答案 0 :(得分：1)
“最初，我已经采用编写接受WebAPI GET url的自定义DropDown组件的方法”
您不应这样做：）
在我提出解决方案之前，我想先了解几个重要的关键概念。
首先
render方法将始终在异步内容（例如GET）发生之前运行一次。
生命周期方法顺序将触发首次渲染：constructor => componentWillMount => render => componentDidMount。
这意味着您将必须准备好所有数据以便最初进行渲染。或者具有阻止某些jsx被调用的条件。
第二
如果您有动态内容（下拉菜单中的选项），则必须从某个位置获取它。 如果是静态的，则可以在本地定义列表。 如果您要保存响应，则可以使用localStorage或使用redux；中间件redux-persist来持久存储。
我个人看不到这个目的，因为如果动态选项更新了，您可能希望它更新应用程序状态。甚至像这样的1000个简单调用对于服务器来说都不昂贵。
如果您使用的是redux，则应将选项保留在那里，因为这样一来，您每次安装带有下拉菜单的组件时都不必制作GET。
建议：
您可以通过多种方法来执行此操作，但这是一个简单的解决方案）。
保留组件中的局部状态并对其进行初始化以进行首次渲染
this.state = {dropDownOptions: []}
然后在componentDidMount中进行api调用：
fetch(url).then((response)=>this.setState({dropDownOptions: response}));
最后是您的渲染方法：
<MyDropDown options={this.state.dropDownOptions} .../>