В чем разница между useState и useImmer? - PullRequest
Новая
       55

В чем разница между useState и useImmer?

2 голосов
/ 08 мая 2020

Я видел, как некоторые приложения React использовали useImmer в качестве ловушки вместо useState. Я не понимаю, что предлагает useImmer, а useState - нет.

В чем преимущество использования useImmer перед официальным useState?

1 Ответ

0 голосов
/ 07 сентября 2020

Вкратце, immer упрощает способ изменения вложенных / сложных структур данных. Взгляните на эти 2 способа:

рассмотрите объект ниже: 

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