react中 可变数据和不可变数据的修改及immer.js 库

React中有两种数据：可变数据和不可变数据。可变数据是指可以直接修改其值的数据类型，例如数组和对象。而不可变数据则是指一旦创建就不能被修改的数据类型，例如字符串和数字。

在React中，我们应该尽量使用不可变数据来管理组件的状态。这是因为React使用的虚拟DOM算法需要比较前后两个状态树的差异，如果使用可变数据进行修改，React会误认为前后两个状态树相同，从而无法正确地更新组件。

如果我们需要修改一个不可变数据，我们可以使用一些库来帮助我们进行操作。其中，immer.js是一个非常流行的库，它使用了一种基于代理的技术，可以让我们直接修改不可变数据，而不需要创建新的对象。

使用immer.js非常简单，我们只需要使用produce函数包裹我们需要修改的数据即可。例如：

import produce from "immer";

const originalData = { count: 0 };

const newData = produce(originalData, (draftData) => {
  draftData.count += 1;
});

console.log(originalData); // { count: 0 }
console.log(newData); // { count: 1 }

在上面的代码中，我们使用produce函数包裹了originalData，然后在回调函数中直接修改了draftData的count属性。最后，我们得到了一个新的不可变数据newData，它的count属性的值为1，而originalData的count属性的值仍然为0。