useState和useImmer有什么区别？

Question

我看到一些React应用程序使用useImmer作为钩子，而不是使用useState。我不明白useImmer提供了什么useState没有的优势。

与使用官方的useState相比，使用useImmer的优点是什么？

- randombits

---

尝试一下这个链接，我认为它很好地解释了优点：https://blog.logrocket.com/immutability-in-react-with-immer/ （但要注意，根据使用情况，它可能会过度使用。我的意思是，对于大多数情况，useState已经足够了。） - Luis Gouveia

Answer 1

简而言之，immer让你更容易地改变嵌套/复杂的数据结构。看看以下这两个方式：

考虑下面的对象：

const [product, updateProduct] = useState({
    name: "Product 1",
    SKU: "SKU-001",
    availability: 30,
    stock: [
      {
        id: 1, 
        store: "Store 1",
        quantity: 10
      },
      {
        id: 2, 
        store: "Store 2",
        quantity: 20
      }
    ]
  });

为了进行操作，您应该传递整个对象并覆盖您想要更新/更改的属性：

updateProduct({ ...product, name: "Product 1 - Updated" })

不过，如果你使用"useImmer"，你可以只发送想要更改的部分，immer 本身会在后台处理其余部分。

  const [product, updateProduct] = useImmer({
    name: "Product 1",
    SKU: "SKU-001",
    availability: 30,
    stock: [
      {
        id: 1, 
        store: "Store 1",
        quantity: 10
      },
      {
        id: 2, 
        store: "Store 2",
        quantity: 20
      }
    ]
  });

因此，进行更新：

updateProduct((draft) => { 
   draft.name = "Product Updated" };
})

当你需要操作复杂结构时，使用它会更有意义。例如，如果你想要更改“Stock”数组中的第二个对象，那么你可以使用：

updateProduct((draft) => {
    draft.stock[1].quantity = 30;
})

- mexam

---

使用updateProduct的immer版本，如果draft.name之前为null或undefined，你会如何更新它的值？以那种方式访问会抛出错误，对吗？ - undefined