Question

我已经看到一些React应用程序将useImmer用作钩子而不是useState。我不了解useImmer所提供的useState没有提供的内容。

使用useImmer比使用官方useState有什么优势？

Answer 1

简而言之，沉浸式简化了对嵌套/复杂数据结构进行变异的方式。看看这两种方式：

请考虑以下对象：

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”，则可以发送您要更改的唯一部分，而沉浸式本身将在引擎盖下处理其余部分。

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

useState和useImmer有什么区别？

1 个答案: