【问题标题】:Should I fetch all data at once and save it in the state?我应该一次获取所有数据并将其保存在状态中吗?
【发布时间】:2018-02-03 10:42:37
【问题描述】:

我目前正在为用户列表实现分页(只是一个示例)。一种方法是按页面获取用户。这意味着我向 API 传递了一些东西,以便它返回一组与当前页面相对应的用户。另一种方法是获取所有用户,将其保存在状态中,然后在 React 中进行所有计算(页面数等)。

在接下来的几天里,我计划实施轮询(我是新手,顺便说一句),所以只要数据库记录发生变化,数据总是最新的。

我想请问您对我应该采用哪种方法的意见?我不确定哪个更好地与轮询结合,因为我对它比较陌生。我担心如果我获取所有用户然后进行轮询,它可能会消耗大量内存并导致浏览器崩溃。

【问题讨论】:

  • 假设您有 100 万用户,每个用户都有他们的用户名、头像等...您是否真的想查询数据库并发送所有数据以便用户可以看到第一个在a 下的 10 个用户意识到他们想要一个不同的页面?有多少用户可以访问索引页面?您是否希望所有百万用户在每次访问您的网站时都获得数据库“转储”? ...分页旨在避免开销,而不仅仅是将数据分成页面;-)

标签: reactjs websocket react-redux polling


【解决方案1】:

最好按页面获取用户,因为这样会导致服务器和客户端之间传输的数据最少。您可以在需要时获取数据。加载第一页时,您可以将其保存到状态,加载第二页时,您可以将其附加到状态(这样您就不必再次获取整个数据)。预先获取所有数据是没有意义的,因为它会导致加载时间增加(尤其是因为您谈到了可能导致浏览器崩溃的大量数据)。如果你有这么多数据,你也可以用新数据替换状态。

【讨论】:

    【解决方案2】:

    我想,你可以试试这种方式,根据分页获取用户,一旦收到数据,就可以在现有数组中附加/替换

    【讨论】:

      【解决方案3】:

      一次获取所有数据然后在前端执行分页不是推荐的解决方案,因为您从数据库中获取所有数据是不必要的。数据应在用户请求时按需获取。

      要提高性能,您可以做的一件事是获取当前页面和下一个/上一个页面的数据并将其保持在状态。一旦用户决定继续前进到第 3 页,然后进行 API 调用以获取该数据。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-01-31
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-07-14
        • 1970-01-01
        • 2023-03-17
        相关资源
        最近更新 更多