简而言之,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;
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。