面试题：Solid.js 分页加载大数据集时如何管理滚动位置与数据状态同步

实现思路
- 记录滚动位置：在触发滚动事件且判断接近页面底部时，记录当前页面的滚动位置。
- 加载新数据：通过 API 请求新的数据，并将其插入到数据列表中。
- 恢复滚动位置：新数据加载完成后，根据之前记录的滚动位置，恢复到相对应的数据位置。
- 维护数据状态：使用 Solid.js 的响应式状态管理机制，确保选中项等状态在数据更新时不丢失。

涉及的 Solid.js 相关 API

createSignal：用于创建响应式状态。例如，创建用于存储数据列表、选中项等状态的信号。

import { createSignal } from'solid-js';
const [dataList, setDataList] = createSignal([]);
const [selectedItem, setSelectedItem] = createSignal(null);

onMount：在组件挂载时执行一些初始化操作，如设置滚动事件监听。

import { onMount } from'solid-js';
onMount(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
});

createEffect：当依赖的响应式数据发生变化时，自动重新执行副作用操作。例如，当新数据加载完成更新 dataList 后，通过 createEffect 恢复滚动位置。

import { createEffect } from'solid-js';
createEffect(() => {
  const storedScrollPosition = getStoredScrollPosition();
  if (storedScrollPosition) {
    // 这里假设存在一个函数可以根据记录的位置恢复滚动
    restoreScrollPosition(storedScrollPosition);
  }
});

具体实现步骤

监听滚动事件：

const handleScroll = () => {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {
    const currentScrollPosition = window.pageYOffset;
    // 存储当前滚动位置
    storeScrollPosition(currentScrollPosition);
    loadNewData();
  }
};

加载新数据：

const loadNewData = async () => {
  const response = await fetch('your - api - url');
  const newData = await response.json();
  setDataList([...dataList(),...newData]);
};

恢复滚动位置：在新数据加载完成后，根据之前存储的滚动位置恢复滚动。

const restoreScrollPosition = (position) => {
  window.scrollTo({ top: position, behavior:'smooth' });
};

维护选中项状态：在数据更新时，确保选中项仍然有效。例如，假设数据项有唯一标识符 id：

const handleItemClick = (item) => {
  setSelectedItem(item);
};
const newDataList = dataList();
const existingSelected = selectedItem();
if (existingSelected) {
  const newSelected = newDataList.find((item) => item.id === existingSelected.id);
  setSelectedItem(newSelected);
}

这样可以在 Solid.js 中实现大数据集分页加载时，保证滚动位置相对数据内容的一致性，同时维护好数据状态。

面试题：Solid.js 分页加载大数据集时如何管理滚动位置与数据状态同步

知识考点

面试题答案