React 中的分页是什么以及它是如何工作的？
Posted: Tue Dec 03, 2024 4:53 am
有时你看着程序员的话，只想有人接受并用简单的人类语言解释一切。我们决定承担这项任务并撰写了一篇评论文章，它将帮助您了解有关分页所需的所有信息。技术部分由 Artjoker 的 JS 开发人员 Dmitry 提供。
什么是分页？
分页可优化数据、大型列表和表格的查看。在她的帮助下反应开发者将一大组数据分成小块——页面，并逐个显示它们。
这是必要的下载速度优化并使数据适合页面大小。后者对于让用户更容易掌握信息块是必要的。
分页分为分页和无限列表。
在第一种情况下，我们一次显示一页 - 要进一步操作，您需要使用页面导航 - 带有页码或“上一页”/“下一页”的按钮。例如，就像在谷歌搜索中一样。
React 中的分页是什么以及它是如何工作的？ - 图像
第二种情况的一个例子是延迟加载。该方法提供 墨西哥电话号码数据 了世界上所有的乐趣 - 无需滚动浏览任何内容，因为列表本身补充了现有数据，分段加载新块。当用户滚动到末尾时会发生这种情况。这就是智能手机或同一个 Instagram feed 的许多产品的工作原理。
网络应用程序开发没有延迟加载就离不开它，因为它允许您快速在屏幕上向用户显示一些数据并填充空间，并根据需要添加其余部分。
React 用于大型服务器端存储列表。将其用于本地数据并不总是有意义，因为所有数据都已经存在。
本地存储是必要的，以便系统可以快速检索数据并处理整个阵列。如果我们谈论的是长列表，这并没有什么好处，因为数据将需要很长时间才能加载，并且用户可能不会查看全部数据。仅下载访问者当前正在查看的那些元素是有益的。
分页也分为服务器和前端。
服务器端分页和前端分页有什么区别？
React 中的服务器端分页用于处理大量数据。例如，一个表有一千行 - 将它们全部加载到前端是没有意义的，因为用户不会查看其中的大部分 - 这是太多的数据。此外，加载和显示大量信息需要花费太多时间。在这种情况下，使用服务器分页。这意味着我们分部分加载表格并逐页显示信息。在某些时候，用户请求下一部分，然后我们才开始加载它。
React JS 中的前端分页主要是当我们的数据很少，我们可以将其加载并存储在我们这边或者全部存储在前端端时完成。在这种情况下，我们也分部分显示所有内容，但我们不会重新加载页面，而只是在我们这边获取一条新数据。
此选项速度更快、响应更灵敏，但需要一次加载所有数据。因为如果我们对数据/列表进行排序或过滤，我们必须能够迭代整个表 - 这只能在完全加载时才能完成。如果我们使用服务器分页，那么为了排序和加载，我们向服务器发出请求并接收一组新的已处理数据。
如何使用React和Redux实现服务器端分页？
在一般项目中，React 用作构建用户界面的库，Redux 用作状态管理器。
应用程序状态是前端应用程序的前端全局数据存储。更改此数据将导致 React 重新渲染页面。
当您访问页面时，React 会请求 API 初始显示数据。即第一页（大部分都重置了过滤器排序）。我们请求数据并将其放入 Redax。一旦 Redux 中与 React 中的表关联的数据发生变化，React 就会立即重绘并显示该数据。
将来，当我们在界面侧请求新页面时（通过按分页号或向下滚动页面，如果实现了无限列表，就像在手机上一样），React 会向 Redax 发出信号，表明它需要获取新的快照。因此，发送下一页的请求，新数据覆盖或补充当前数据 - 取决于实现。此后，Redax 中的数据发生变化并通知 React，React 发现它们已更改并重绘、补充表格或创建新页面。
通过逐页分页，我们单击第二页，之后新数据到达并覆盖以前的数据。有一个定向的数据流——React 看到信息正在变化并显示新信息。当我们向后退时，之前的数据被加载，一切又重新完成。如果我们显示一个无限列表，那么这些行将添加到当前行中 - 我们加载十行，然后再加载十行 - 有二十行，依此类推，无限。在这种情况下，React 对数据更改做出反应，立即完成列表。
这一切对于系统来说成本高昂吗？
如果我们使用服务器端分页，那么我们正在谈论显示数据的最小成本。在这种情况下，我们都信任服务器 - 它完全执行所有计算并给我们结果。
值得注意的是，与服务器交互确实会引入一些时间延迟 - 如果我们有一个简短的列表，我们可以下载所有内容并完全在我们这边运行进程。
Web 应用程序开发需要了解许多复杂的过程。普通 PC 用户不需要了解如何进行 React 分页，但知道它不会造成伤害也没什么坏处。
发布日期： 2019年11月20日
编辑日期： 2024年8月31日
分享一下读完文章后的感受
什么是分页？
分页可优化数据、大型列表和表格的查看。在她的帮助下反应开发者将一大组数据分成小块——页面，并逐个显示它们。
这是必要的下载速度优化并使数据适合页面大小。后者对于让用户更容易掌握信息块是必要的。
分页分为分页和无限列表。
在第一种情况下，我们一次显示一页 - 要进一步操作，您需要使用页面导航 - 带有页码或“上一页”/“下一页”的按钮。例如，就像在谷歌搜索中一样。
React 中的分页是什么以及它是如何工作的？ - 图像
第二种情况的一个例子是延迟加载。该方法提供 墨西哥电话号码数据 了世界上所有的乐趣 - 无需滚动浏览任何内容，因为列表本身补充了现有数据，分段加载新块。当用户滚动到末尾时会发生这种情况。这就是智能手机或同一个 Instagram feed 的许多产品的工作原理。
网络应用程序开发没有延迟加载就离不开它，因为它允许您快速在屏幕上向用户显示一些数据并填充空间，并根据需要添加其余部分。
React 用于大型服务器端存储列表。将其用于本地数据并不总是有意义，因为所有数据都已经存在。
本地存储是必要的，以便系统可以快速检索数据并处理整个阵列。如果我们谈论的是长列表，这并没有什么好处，因为数据将需要很长时间才能加载，并且用户可能不会查看全部数据。仅下载访问者当前正在查看的那些元素是有益的。
分页也分为服务器和前端。
服务器端分页和前端分页有什么区别？
React 中的服务器端分页用于处理大量数据。例如，一个表有一千行 - 将它们全部加载到前端是没有意义的，因为用户不会查看其中的大部分 - 这是太多的数据。此外，加载和显示大量信息需要花费太多时间。在这种情况下，使用服务器分页。这意味着我们分部分加载表格并逐页显示信息。在某些时候，用户请求下一部分，然后我们才开始加载它。
React JS 中的前端分页主要是当我们的数据很少，我们可以将其加载并存储在我们这边或者全部存储在前端端时完成。在这种情况下，我们也分部分显示所有内容，但我们不会重新加载页面，而只是在我们这边获取一条新数据。
此选项速度更快、响应更灵敏，但需要一次加载所有数据。因为如果我们对数据/列表进行排序或过滤，我们必须能够迭代整个表 - 这只能在完全加载时才能完成。如果我们使用服务器分页，那么为了排序和加载，我们向服务器发出请求并接收一组新的已处理数据。
如何使用React和Redux实现服务器端分页？
在一般项目中，React 用作构建用户界面的库，Redux 用作状态管理器。
应用程序状态是前端应用程序的前端全局数据存储。更改此数据将导致 React 重新渲染页面。
当您访问页面时，React 会请求 API 初始显示数据。即第一页（大部分都重置了过滤器排序）。我们请求数据并将其放入 Redax。一旦 Redux 中与 React 中的表关联的数据发生变化，React 就会立即重绘并显示该数据。
将来，当我们在界面侧请求新页面时（通过按分页号或向下滚动页面，如果实现了无限列表，就像在手机上一样），React 会向 Redax 发出信号，表明它需要获取新的快照。因此，发送下一页的请求，新数据覆盖或补充当前数据 - 取决于实现。此后，Redax 中的数据发生变化并通知 React，React 发现它们已更改并重绘、补充表格或创建新页面。
通过逐页分页，我们单击第二页，之后新数据到达并覆盖以前的数据。有一个定向的数据流——React 看到信息正在变化并显示新信息。当我们向后退时，之前的数据被加载，一切又重新完成。如果我们显示一个无限列表，那么这些行将添加到当前行中 - 我们加载十行，然后再加载十行 - 有二十行，依此类推，无限。在这种情况下，React 对数据更改做出反应，立即完成列表。
这一切对于系统来说成本高昂吗？
如果我们使用服务器端分页，那么我们正在谈论显示数据的最小成本。在这种情况下，我们都信任服务器 - 它完全执行所有计算并给我们结果。
值得注意的是，与服务器交互确实会引入一些时间延迟 - 如果我们有一个简短的列表，我们可以下载所有内容并完全在我们这边运行进程。
Web 应用程序开发需要了解许多复杂的过程。普通 PC 用户不需要了解如何进行 React 分页，但知道它不会造成伤害也没什么坏处。
发布日期： 2019年11月20日
编辑日期： 2024年8月31日
分享一下读完文章后的感受