1.24 immer 简化不可变对象操作

一、immer 简化不可变对象操作

1. immer是一个第三方模块，用一种放方便的方式处理不可变状态

   1. 相对于深拷贝来说，它使拷贝相对便宜，不需要复制数据树的未更改的部分，并且在内存中与相同状态的旧版本共享

2. 如何使用：

   1. 安装：npm install immer use-immer

   2. 使用过程，替换useState，可以完全简化后续操作：

   3. 数组示例：

      // 引入
      import { useImmer } from 'use-immer'
      
      function App() {
        // 定义
        const [list, setList] = useImmer([
          { id: 1, text: 'aaa' },
          { id: 2, text: 'bbb' },
          { id: 3, text: 'ccc' },
        ])
      
        const handleClick = () => {
          setList((draft) => {
            console.log(draft)
            // 添加
            draft.push({ id: 4, text: 'ddd' })
            // 删除元素（删除第二个元素）
            draft.splice(2, 1)
            // 修改第二个元素
            draft[1] = { id: 4, text: 'ddd' }
          })
        }
      
        return (
          <>
            <div>Default Template</div>
            <button onClick={handleClick}>点击</button>
            <ul>
              {list.map((item) => (
                <li key={item.id}>{item.text}</li>
              ))}
            </ul>
          </>
        )
      }
      
      export default App
      

   4. 对象操作

      import { useImmer } from 'use-immer'
      
      function App() {
        const [info, setList] = useImmer({
          username: 'Snow',
          age: 20,
        })
      
        const handleClick = () => {
          setList((draft) => {
            console.log(draft)
            // 修改数据
            draft.username = 'lonelysnow'
          })
        }
      
        return (
          <>
            <div>Default Template</div>
            <button onClick={handleClick}>点击</button>
            <div>{JSON.stringify(info)}</div>
          </>
        )
      }
      
      export default App

      除非过于复杂的数据，不然不建议使用immer