关于react.js:useState和useImmer有什么不同

简而言之，immer 简化了扭转嵌套 / 简单数据结构的形式。看看这两种形式：

先看 useState 的应用办法

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;
})