React中不使用Immer，直接修改解构后的嵌套状态副本是否可行？

首先直接给结论：你提到的这种写法存在隐藏隐患，核心问题是它破坏了React State的不可变性原则，虽然看起来简洁，但可能导致难以调试的bug。

为什么这种写法有问题？ #

我们先拆解你的代码：

setUser(prevUser => {
    const newUser = {...prevUser} // 这里是浅拷贝
    newUser.education.school.name = 'Layercode Academy'
    return newUser
})

{...prevUser}是浅拷贝——它只复制了prevUser顶层的属性，但newUser.education仍然和原prevUser.education指向同一个内存对象。当你修改newUser.education.school.name时，你实际上也在修改原state中的prevUser.education.school对象，因为它们是同一个引用。

React的state设计要求不可直接修改原state，原因有两个：

• React依赖state的引用变化来判断是否触发组件重新渲染（虽然这里顶层newUser是新引用，组件会渲染，但原state的深层属性被偷偷修改了）；
• 直接修改原state会导致state的快照不一致——比如在useEffect、其他组件或状态逻辑中，可能意外拿到被修改后的旧state，引发逻辑混乱，这种bug往往很难定位。

为什么教程都用逐层解构？ #

逐层解构的写法：

setUser(prevUser => {
    return {
        ...prevUser,
        education: {
            ...prevUser.education,
            school : {
                ...prevUser.education.school,
                name: 'Layercode Academy'
            }
        }
    }
})

它的核心是只在需要修改的层级创建新对象，保证：

• 顶层user是新引用；
• education是新引用；
• school是新引用；
  而未修改的属性（比如age、name）仍然复用原引用，既保证了不可变性，又避免了不必要的深拷贝性能损耗。

不用Immer的安全替代方案 #

如果你觉得逐层解构太繁琐，除了Immer，还有两种安全的思路：

1. 手动浅拷贝到目标层级：和教程写法一致，虽然繁琐但最可靠；
2. 深拷贝（谨慎使用）：如果你的state结构不包含函数、Symbol、循环引用等复杂类型，可以用JSON.parse(JSON.stringify(prevUser))做深拷贝，但这种方法性能较差，且有类型限制：

   setUser(prevUser => {
       const newUser = JSON.parse(JSON.stringify(prevUser));
       newUser.education.school.name = 'Layercode Academy';
       return newUser;
   })
   

总结 #

虽然你没有直接修改prevUser本身，但修改了它的深层嵌套对象，这仍然违反了React的不可变性原则。这种写法可能在简单场景下暂时没问题，但随着应用复杂度提升，会埋下难以排查的隐患。教程中的逐层解构写法虽然繁琐，但能严格保证state的不可变性，是React状态管理的最佳实践之一。

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