React使用useState管理矩阵状态时单格更新方案及失效问题咨询

原有写法不生效的根因 #

• 引用共享问题
  你初始化矩阵用的Array(n).fill(Array(n).fill({ color: "red" }))写法存在两层引用共享陷阱：
  • 外层数组的20个元素，全部指向同一个内层数组的引用
  • 内层数组的20个对象，全部指向同一个{color: "red"}对象的引用
    这就导致你修改任意一个单元格的color属性，本质是修改全局共享的唯一对象，所有单元格都会同步变色。
• 违反React不可变更新原则
  你之前尝试的所有修改方法都是直接修改原有state的内部属性，没有返回新的数组引用，React对state做浅比较时会判定状态没有变化，不会触发重渲染，所以修改看不到效果。你试的[...matrix]只拷贝了最外层数组，内层数组还是原有引用，依然存在共享问题。

最优实现方案 #

不需要全量重写整个矩阵，只对修改涉及的层级做浅拷贝即可，性能损耗极低，完全适配你的场景：

1. 修正矩阵初始化逻辑 #

将fill写法替换为循环生成，保证每个数组、每个单元格对象都是独立引用：

const [matrix, setMatrix] = useState(
  Array.from({length: n}, () => 
    Array.from({length: n}, () => ({color: "red"}))
  )
)

2. 修正单元格更新逻辑 #

只拷贝需要修改的行和目标单元格，其他层级全部复用原有引用，最小化更新开销：

const updateCell = (i, j) => {
  setMatrix(prev => {
    // 仅拷贝外层数组
    const newMatrix = [...prev]
    // 仅拷贝要修改的对应行
    const newRow = [...newMatrix[i]]
    // 仅拷贝要修改的单元格对象，更新颜色
    newRow[j] = {...newRow[j], color: "blue"}
    // 替换修改后的行到新矩阵中
    newMatrix[i] = newRow
    return newMatrix
  })
}

这个方案只会修改必要的引用，React重渲染时只会更新对应位置的单元格，就算矩阵规模扩大到100x100也不会有性能问题。

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