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

Question

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

不同的实体与配置数据具有 FK 关系，和/或具有枚举字段。我试图了解如何以一种高效的方式在页面加载时预先加载配置数据和所有使用的枚举，以便可以在下拉列表中使用它们。我对 React 还很陌生（1 个月），所以仍在日复一日地学习。

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

那么，在 React 中使用某种闪屏并调用 API 来缓存值，然后可以在其他组件中使用的建议方法是什么？

Answer 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} .../>