如何在React useState钩子中高效修改对象且无需克隆？

你之前用JSON.parse(JSON.stringify(obj))深克隆整个对象的方法虽然能实现需求，但确实没必要——我们只需要更新状态中变化的部分，既符合React的不可变状态原则，又能提升性能。

假设你要把names数组里索引为2的"Spot"改成"Richard"，下面是两种更高效的实现方式：

方法1：用数组map生成新数组 #

利用函数式更新（依赖旧状态时推荐用这种方式），结合展开运算符和map方法，只修改目标元素：

setData(prevData => ({
  // 展开原对象的所有其他属性，保持不变
  ...prevData,
  // 生成新的names数组，仅替换目标索引的元素
  names: prevData.names.map((name, index) => 
    index === 2 ? "Richard" : name
  )
}));

方法2：用slice+展开运算符精准替换 #

如果明确知道目标元素的索引，也可以通过截取数组前后部分，拼接新元素来生成新数组：

setData(prevData => ({
  ...prevData,
  names: [
    // 取索引2之前的所有元素
    ...prevData.names.slice(0, 2),
    // 替换成新名字
    "Richard",
    // 取索引2之后的所有元素（如果有的话）
    ...prevData.names.slice(3)
  ]
}));

这些方法的优势 #

• 不用克隆整个对象，只更新需要变化的names数组，性能更优，尤其当对象包含其他大数据时。
• 完全遵循React不可变状态要求，确保状态更新能被组件正确检测，触发渲染。
• 避免了JSON.parse(JSON.stringify)的潜在问题：比如无法处理函数、Symbol类型，或者存在循环引用的对象。

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