在 React 中，当父组件需管理数百甚至上千个子组件的选中状态时，频繁重渲染会导致性能问题；本文介绍通过 useCallback + React.memo 组合方案，结合函数式更新，实现高性能、低开销的状态管理。
在 react 中，当父组件需管理数百甚至上千个子组件的选中状态时，频繁重渲染会导致性能问题；本文介绍通过 `usecallback` + `react.memo` 组合方案，结合函数式更新，实现高性能、低开销的状态管理。
在处理大规模列表（如 1000+ 条数据）的多选状态时，直接在 map 中内联创建事件处理器或依赖未稳定的状态变量，极易引发全量子组件重复渲染——即使只有单个复选框被点击，所有 <child></child> 实例都会因父组件 handleToggleCheck 函数引用变化或 checked 计算逻辑重新执行而被迫更新。
根本原因在于两点：
-
函数引用不稳定：每次父组件渲染，
handleToggleCheck都是新函数，导致Child的onCheckprop 发生变化； -
状态读取非函数式：原代码中
checkedCodes.has(code)读取的是上一次渲染的checkedCodes快照，而setCheckedCodes(new Set(checkedCodes))又强制创建新实例，破坏了useCallback的依赖稳定性。
✅ 正确解法是 分离状态更新逻辑与函数引用稳定性：
首先，使用 useCallback 并传入空依赖数组 []，同时改用函数式更新（prev => ...），避免将 checkedCodes 作为依赖项：
const handleToggleCheck = useCallback((code: string) => {
setCheckedCodes(prev => {
const next = new Set(prev);
if (next.has(code)) {
next.delete(code);
} else {
next.add(code);
}
return next;
});
}, []);⚠️ 注意：prev 是 React 提供的最新状态值，确保原子性与一致性，无需手动维护 ref 或担心闭包 stale value。
其次，必须配合 React.memo 封装子组件，否则 useCallback 的优化完全失效：
import { memo } from 'react';
const Child = memo(({ checked, code, onCheck }: {
checked: boolean;
code: string;
onCheck: (code: string) => void;
}) => (
<label>
<input
type="checkbox"
checked={checked}
onChange={() => onCheck(code)}
/>
{code}
</label>
));React.memo 会浅比较 Child 的所有 props —— 当 checked 布尔值未变、code 字符串不变、onCheck 函数引用稳定时，该子组件将跳过渲染，实现真正的局部更新。
? 进阶建议：
- 若
codes列表本身极长（如 > 5000），可进一步结合React.memo+key稳定性 + 虚拟滚动（如react-window）避免 DOM 膨胀； - 对于更复杂状态（如带元数据的选中项），可考虑使用
Map<string selectionmeta></string>替代Set<string></string>，保持同样更新模式； - 避免在
map中直接调用checkedCodes.has(code)—— 它虽无副作用，但每次渲染都执行 1000 次查找，可提前计算为对象映射提升 O(1) 查询效率（如const checkedMap = useMemo(() => Object.fromEntries([...checkedCodes].map(k => [k, true])), [checkedCodes])），再以checked={checkedMap[code]}传入。
总结：高性能多选管理 = ✅ useCallback（空依赖 + 函数式更新） + ✅ React.memo（子组件纯化） + ✅ 状态结构合理（Set/Map 优于数组遍历）。三者缺一不可，方能在大数据量下兼顾响应性与渲染效率。
