React中修改数组元素时，如何避免组件整体重渲染？

核心问题拆解 #

你遇到的两个问题本质是关联的：

• 每次修改数组元素时触发全量重渲染，是因为数组引用被频繁更新，且onChange回调每次渲染都会生成新函数，导致memo失效。
• memo仅能阻止props浅比较无变化的组件重渲染，但你的代码中onChange是动态创建的新函数，memo会判定props变化，从而触发重渲染。

具体解决方案 #

1. 稳定回调函数，让memo生效 #

使用useCallback缓存handleInputChange函数，避免每次渲染生成新的回调实例，确保Cell组件的onChange props稳定。

2. 优化数组更新逻辑 #

采用函数式更新获取最新状态，减少不必要的状态依赖，同时保证数组更新的正确性。

修改后的完整代码 #

import React, { useState, memo, useCallback } from "react";

const Cell = memo(({ value, onChange }) => {
  return (
    <input
      type="text"
      className="border-yellow-500 border-2 text-black"
      value={value}
      onChange={onChange}
    />
  );
});

export default function App() {
  const [test, setTest] = useState(new Array(2500).fill(""));

  // 用useCallback缓存回调，依赖项仅保留setTest（React保证其引用稳定）
  const handleInputChange = useCallback((index, value) => {
    setTest(prevTest => {
      const newTest = [...prevTest];
      newTest[index] = value;
      return newTest;
    });
  }, []);

  return (
    <div className="App">
      <div className="flex flex-wrap">
        {test.map((cell, index) => (
          <div key={index} className="border text-dark">
            <Cell
              value={cell}
              onChange={(e) => handleInputChange(index, e.target.value)}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

额外优化建议（针对大数组场景） #

• 若数组元素存在唯一标识，不要用index作为key，改用唯一ID，提升React diff算法的性能。
• 可将大数组拆分为多个子列表组件，用memo包裹子列表，进一步缩小重渲染范围。
• 极端场景下，可使用useReducer替代useState，更高效地处理复杂状态更新逻辑。

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