如何优化React组件中数据切片导致的重渲染问题？

你的原代码里，每次组件渲染时都会执行data.slice()来计算当前页要展示的内容。只要组件触发渲染（比如页码切换、每页条数修改，甚至父组件重渲染导致当前组件跟着刷新），这个切片操作就会重复执行——如果你的data数据量很大，这种重复计算会额外消耗性能。

优化方案1：用useMemo缓存计算结果（推荐） #

React的useMemo Hook专门用来缓存纯计算的结果，只有当依赖项变化时才会重新计算。这比手动把结果存到state里更简洁，也符合React的最佳实践。

修改后的代码如下：

import { useState, useMemo } from "react";
import data from "data.json"

function MyComponent() {
  const [pageInView, setPageInView] = useState(1);
  const [itemsOnPage, setItemsOnPage] = useState(15);

  // 用useMemo缓存切片结果，仅当依赖项变化时重新计算
  const itemsToDisplay = useMemo(() => {
    const indexFinalItem = pageInView * itemsOnPage;
    const indexFirstItem = indexFinalItem - itemsOnPage;
    return data.slice(indexFirstItem, indexFinalItem);
  }, [pageInView, itemsOnPage, data]); // 依赖项：只有这些值变了才重新计算

  // --- rest of component ---
}

这里的逻辑是：只有pageInView、itemsOnPage或者data发生变化时，才会重新执行切片操作，其他渲染场景下直接复用之前缓存的结果。

优化方案2：将计算结果存入state #

如果一定要按照反馈里说的“存入state”，可以在依赖项变化时手动更新state中的分页数据。这种方式适合需要把分页结果作为中间状态复用的场景，但相比useMemo会多一层state更新的逻辑：

import { useState, useEffect } from "react";
import data from "data.json"

function MyComponent() {
  const [pageInView, setPageInView] = useState(1);
  const [itemsOnPage, setItemsOnPage] = useState(15);
  const [itemsToDisplay, setItemsToDisplay] = useState([]);

  // 当依赖项变化时，重新计算并更新state
  useEffect(() => {
    const indexFinalItem = pageInView * itemsOnPage;
    const indexFirstItem = indexFinalItem - itemsOnPage;
    setItemsToDisplay(data.slice(indexFirstItem, indexFinalItem));
  }, [pageInView, itemsOnPage, data]);

  // --- rest of component ---
}

这个方案里，我们通过useEffect监听依赖变化，只有当依赖改变时才重新计算切片结果并更新itemsToDisplay的state，避免了每次渲染都执行切片。

两种方案对比 #

• useMemo更适合纯计算场景，代码更简洁，不需要额外维护state更新逻辑；
• 存入state的方式适合需要将分页结果作为其他状态更新触发源的场景（比如基于当前展示数据做二次筛选），但会多一次state更新的渲染开销。

对于你的场景，优先选择useMemo的方案就足够解决重复计算的问题。

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