React+Express项目中如何查询数据库追加10条结果实现无限滚动

你提到的在请求中传入逐次递增数值的方案是完全可行的，这是业界实现分页最常用的偏移分页方案，对应逻辑如下：

前后端实现逻辑 #

• 前端侧：
  • 维护offset状态，初始值为0，每次成功加载新数据后累加10
  • 监听列表滚动事件，当滚动到距离列表底部预设阈值时，携带当前offset参数发起API请求
  • 拿到返回数据后拼接在现有列表末尾，如果返回结果数量小于10，说明已加载完全部数据，停止监听滚动事件不再发起请求
• 后端侧：
  • 接收前端传递的offset参数，做合法性校验（必须为非负整数，默认值设为0）
  • 将参数代入SQL语句执行分页查询，返回查询结果给前端

SQL查询实现 #

你只需要在原有SQL基础上增加OFFSET关键字，同时增加固定排序规则即可，修改后的SQL如下：

SELECT * FROM games ORDER BY id ASC LIMIT 10 OFFSET ?

注意必须加ORDER BY子句，且排序字段要选用自增ID、创建时间这类值固定不会变更的字段，避免多次查询的结果排序不一致，出现数据重复或者遗漏的问题。
OFFSET后接的就是前端传的偏移量：第一次请求传0，查询前10条数据；第二次传10，跳过前10条查询接下来的10条，和你提到的逐次递增的逻辑完全匹配。

可选优化方案 #

如果你的games表数据量超过10万条，偏移分页的性能会明显下降，因为OFFSET需要扫描所有跳过的行，此时可以改用游标分页方案：

• 前端每次请求不传offset，改为传递上一次返回的最后一条数据的排序字段值，比如最后一条数据的IDlastId
• 对应SQL改为：

SELECT * FROM games WHERE id > ? ORDER BY id ASC LIMIT 10

该方案不需要扫描跳过的行，查询性能更高，同时也不会因为中间有数据插入、删除导致分页结果错乱。

内容的提问来源于stack exchange，提问作者cuomo