为什么要使用immer?

作者站长头像
站长
· 阅读数 10

我没想要改变深度隐藏的子节点的数据,我每次用扩展运算符创建一个新的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个回答
avatar
test
2024-07-03

js的世界语法糖很多的,为的就是解放代码量,关注业务开发,手动实现immutable 是可行的,但是真的去实现一个无限深度最高效的immutable是不容易的,再附加上具体操作的数据类型,可能是对象、可能是数组,还可能是循环引用对象,实际上业务足够复杂的时候你要处理这个函数就很难了,因此产生了一套库,附带了一些快捷操作方法。

PS: 如果你系统中的immutable数据操作层级都很有限,复杂度不高,确实可以不用工具,我自己的业务就从来不用。

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