惰性求值怎么用在前端数据处理里？

Code°妍妍提问于 2026-03-17 18:24:21 阅读 47

优化

我在做一个表格组件，每次加载都要处理上千条数据，直接 map 一遍太卡了。听说可以用惰性求值优化，但不知道怎么在 JS 里实际实现？

试过用 function* () {} 写生成器，但不确定怎么和 React 的状态更新配合，一不小心就全量计算了。

比如下面这段代码，怎么改成惰性的，只在需要的时候才计算当前页的数据？

const processData = (rawData) => {
  return rawData.map(item => ({
    id: item.id,
    displayName: <code>${item.firstName} ${item.lastName}</code>,
    statusText: getStatusText(item.status)
  }));
};

我来解答赞 10 收藏

反馈

1 条解答

Good“秀莲 Lv1

上千条数据而已，真不至于上生成器。生成器那套在前端场景有点过度设计，和React状态配合确实麻烦。

最直接的方案：只处理当前页的数据。

// 组件里

const [page, setPage] = useState(1);

const pageSize = 20;



// 用 useMemo 只计算当前页，页码变化时才重新计算

const currentPageData = useMemo(() => {

  const start = (page - 1) * pageSize;

  const pageData = rawData.slice(start, start + pageSize);

  

  return pageData.map(item => ({ id: item.id,

    displayName: ${item.firstName} ${item.lastName},

    statusText: getStatusText(item.status)

  }));

}, [rawData, page, pageSize]);

这样不管你有多少条数据，每次只处理20条，根本快到没感觉。

如果你的 getStatusText 本身也很慢，可以再加一层缓存：

const statusCache = new Map();



const getStatusText = (status) => {

  if (!statusCache.has(status)) {

    // 你的慢计算逻辑

    statusCache.set(status, computedValue);

  }

  return statusCache.get(status);

};

生成器适合的场景是：数据源是无限流、或者需要手动控制迭代节奏。你这个分页表格场景，slice + useMemo 就够了，别把简单问题复杂化。

2026-03-18 11:16