何时使用useImmer与useState？前端新手的技术问询

核心适用场景：嵌套对象/数组的状态更新 #

没错，处理多层嵌套的对象或数组确实是useImmer最主要的用武之地。

React的useState要求状态更新必须遵循不可变原则——你不能直接修改原状态对象，必须返回一个新的引用。但面对嵌套结构时，手动做深拷贝、逐层解构的代码会变得冗长且容易出错：

// useState处理嵌套状态的繁琐写法
const [form, setForm] = useState({
  basic: {
    name: "",
    age: 0
  },
  preferences: {
    theme: "light",
    notifications: {
      email: true,
      push: false
    }
  }
});

// 修改push通知状态
setForm(prev => ({
  ...prev,
  preferences: {
    ...prev.preferences,
    notifications: {
      ...prev.preferences.notifications,
      push: true
    }
  }
}));

而useImmer通过produce函数允许你直接“修改”草稿对象（draft），它会自动帮你生成符合不可变要求的新状态，代码可读性和维护性大幅提升：

// useImmer的简洁写法
const [form, setForm] = useImmer({
  basic: {
    name: "",
    age: 0
  },
  preferences: {
    theme: "light",
    notifications: {
      email: true,
      push: false
    }
  }
});

// 修改push通知状态
setForm(draft => {
  draft.preferences.notifications.push = true;
});

其他适用场景：复杂状态更新逻辑 #

除了嵌套结构，当你需要一次性执行多个状态变更操作时，useImmer也能让逻辑更清晰。比如在表单提交前批量修改多个字段，或者处理数组的增删改查（比如过滤、排序、嵌套数组元素更新），用useImmer可以把所有变更逻辑写在同一个回调里，避免多次调用setState或者复杂的prev状态拼接。

什么时候优先用useState？ #

如果你的状态是简单类型（单个字符串、数字、布尔值），或者层级很浅的对象/数组（比如只有一层键值对），直接用useState就足够了，没必要引入useImmer额外的依赖。比如：

• const [count, setCount] = useState(0)
• const [username, setUsername] = useState("")
• const [tags, setTags] = useState(["react", "js"])（修改时直接用setTags(prev => [...prev, "immer"])也很简洁）

一句话总结 #

useImmer不是用来完全替代useState的，它是React不可变状态更新的“语法糖”——当你觉得手动处理不可变状态的代码变得繁琐、易读性差时，就可以考虑用它；简单状态场景下，useState依然是最轻便的选择。

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