immer 使用一些记录


使用 React Hooks 后,类组件变得越来越少见,因为 Hooks 提供了更简洁、更易于理解和维护的方式来处理组件的状态和副作用。然而,在使用 Hooks 时,对于不可变数据的修改操作可能会带来一些挑战和不稳定性。

以一个简单的例子为例,假设我们有以下的状态:

const [people, setPeople] = useState({ name: "neekin", age: 18 });

如果我们想修改 age 属性,传统的方式是需要将原来的对象解构出来,然后进行修改:

setPeople({ ...people, age: 20 });

然而,如果我们在某个地方忘记了解构对象,就有可能造成严重的后果。

为了避免这个问题,可以使用第三方库 immerimmer 提供了一种方便的方式来修改不可变数据,而无需手动进行解构和复制操作。

首先,需要导入 immer

import produce from "immer";

然后,我们可以直接使用 produce 函数来修改状态对象的属性:

setPeople(
  produce((draft) => {
    draft.age = 20;
  })
);

在这个例子中,produce 函数接受一个回调函数,该回调函数提供了一个 draft 对象,我们可以直接在回调函数中修改 draft 对象的属性。immer 会自动处理对象的复制和不可变性,从而避免了手动解构对象的过程。

使用 immer 可以简化状态的修改操作,提高代码的可读性和稳定性。它使得修改复杂的嵌套对象变得更加容易,同时保持了不可变性的好处。

总而言之,通过使用 immer,我们可以在使用 React Hooks 时更加轻松地修改不可变数据,避免手动解构和复制操作,提高代码的可维护性和稳定性。