通过减少API调用来优化性能

Question

说你有一个userProfile容器，它们有userList和userDetail。预期的行为是当用户点击列表上的项目时，它会显示用户的详细信息。

这里有一个问题，它需要2次调用，一次调用获取userList，另一次调用获取userDetail。但是userList的API包含了他们的个人资料所需的一切。

如何避免调用userDetail？与angularjs不同，我无法通过Link传递对象。我没有使用redux。

Answer 1

首先，我认为你并没有真正使用ReactJS的全部功能。 ReactJS是一个SPA，重新加载不需要。当然你使用React Router而你可能没有。但是如果你获取包含所有信息的userList，你需要将它存储在某个地方。你知道，要缓存它。 因此，在普通应用程序中，您将显示一个加载程序来获取userList然后缓存它，这就是我们Flux和Redux的原因。 （以及更多，或者只是自己处理。）

对所有用户进行1次呼叫的解决方案很简单，当您收听每个用户项目时单击然后根据用户ID请求是无用的，因为就像您说的那样，您已经拥有了所需的所有信息。

您的更改并不大，只需在收到userList之后立即存储，并在每个用户项目中点击而不是从服务器中取出它，只需将其从您保存的阵列中拉出即可。 这可能只需要您在基本代码中可能没有的更改。

我的建议，因为你看起来像你刚接触到这个，因为你错过了一些东西。只需阅读更多内容，请查看ReactJS入门套件和博客。 就个人而言，我甚至会在同构应用程序中缓存userList。