认识

2024年03月11日

柏拉文

越努力，越幸运

一、认识

---

Immer 不可变数据, 在计算机中，即指一旦创建，就不能再被更改的数据。对 Immer 对象的任何修改或添加删除操作都会返回一个新的 Immer 对象。它解决的痛点: 一、让JavaScript对于嵌套过深的复杂对象修改的更加容易。二、只修改要修改的节点和受它影响的父节点, 其他节点进行共享。Immer 实现的原理是: 基于 Proxy 来代理对象的各种操作，然后在数据进行操作时，Proxy 会去拷贝被修改对象，然后再进行数据操作，返回拷贝后并被修改的数据。 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费, 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immer 使用了（结构共享）。如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

二、语法

---

const state = {
  info: {
    name: "张三",
    age: 20,
  },
  list: [1, 2, 3],
};

const newState = produce(state, (draftState) => {
  draftState.info.age = 21;
});

console.log("newState", newState); 
console.log("state === newState", state === newState); // false
console.log("state.info === newState.info", state.info === newState.info); // false
console.log("state.list === newState.list", state.list === newState.list); // true