reactjs - 为什么这个渲染很慢？反应

Question

我有一个 api，它可以根据某处的国家/地区获取名称（用户名）。

/names/{countryName}

并且 UI 有两个选项卡 -beingAustralia和India. 为此，我在反应中使用材料 ui 选项卡。

一旦用户单击 India，它就会调用/names/India并获取一个名称列表（接近 200 个）。同样，它也适用于澳大利亚。

当调用后端时，我在前端显示一个加载器。然后我将结果存储names在 state 中调用的对象中。names['India']并且names['Australia']是一个包含 200 个值的数组。这些名称显示在表格中，其中包含名称和从名称生成的随机图像。这一切都很好。

当用户来回切换选项卡时，问题就开始了。由于数据已经存在于该状态中，因此不会进行新的调用。但即便如此，渲染也很慢。它保留在旧选项卡上，直到呈现新选项卡中的数据，然后才切换到新选项卡，这会误导最终用户。

我正在考虑使用react-window-infinite-loader，但是当您逐页获取数据并且 api 以这种方式返回数据时，这会更有用。但是现在，数据无论如何都存在于状态中。为什么渲染它需要这么长时间，我该如何避免这种情况？

标签： reactjsmaterial-uiinfinite-scroll