🚨 React 重渲染方法：引用很重要！
发布: (2026年1月11日 GMT+8 12:10)
2 min read
原文: Dev.to
Source: Dev.to
变异方法（不要更改引用）
这些方法会在内存中直接修改同一个数组/对象，因此在 React 状态上直接使用它们可能不会触发重新渲染：
pushpopshiftunshiftsortreversesplicefillcopyWithin
// ❌ 错误：对已有状态进行变异
setItems(prev => {
prev.push(1); // 变异 `prev`
return prev; // 相同引用 → 不会重新渲染
});安全方法（创建新引用）
这些方法会返回一个新数组，使 React 能检测到变化：
mapfilterconcatsliceflatflatMaptoSortedtoReversedtoSpliced
// ✅ 正确：返回一个新数组
setItems(prev => [...prev, 1]); // 展开到一个新数组中关键规则
React 比较的是引用，而不是其中的值。使用新引用更新状态即可确保重新渲染。
一句话总结
“变异方法保持相同的引用，所以 React 不会重新渲染。更新状态时始终返回一个新引用。”