为什么要使用immer?
我没想要改变深度隐藏的子节点的数据,我每次用扩展运算符创建一个新的obj,然后手动改子节点数据不也挺省事儿的吗?为啥非得要用immer库阿,是不是类似于redux这种库不准许在reducer里面写 let newObj = {...obj} 这样的代码阿?还是什么其他的原因阿?你无非就是要求setState的时候传一个新的obj进去麻,我的土办法也行的通阿?
案例来源: https://redux-toolkit.js.org/usage/immer-reducers
function App() {
const [obj, setObj] = useState({
name: "feeco",
age: 30,
address: {
country: "ca",
city: "calgray",
area: {
location: "north",
direction: "west",
code: [1, 2],
},
},
})
//自己的土办法 也可以行的通
const changeObj = () => {
let newObj = { ...obj }
newObj.address.area.location = "not a location"
newObj.address.area.code = [2, 3]
console.log(obj)
console.log(newObj)
setObj(newObj)
}
//redux reducer要求写的方式
const changeObj = () => {
setObj({...obj,address:{...obj.address,area:{...obj.address.area,location:"not a location"}}})
}
return (
<div>
<ReactJson src={obj} />
<button onClick={changeObj}>button</button>
</div>
)
}
回复
1个回答

test
2024-07-03
js的世界语法糖很多的,为的就是解放代码量,关注业务开发,手动实现immutable 是可行的,但是真的去实现一个无限深度最高效的immutable是不容易的,再附加上具体操作的数据类型,可能是对象、可能是数组,还可能是循环引用对象,实际上业务足够复杂的时候你要处理这个函数就很难了,因此产生了一套库,附带了一些快捷操作方法。
PS: 如果你系统中的immutable数据操作层级都很有限,复杂度不高,确实可以不用工具,我自己的业务就从来不用。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容