React Immer 不可变数据结构的处理
Immer 是一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对JS不可变数据结构的需求。
无奈网络上完善的文档实在太少，所以自己写了一份，本篇文章以贴近实战的思路和流程，对 Immer 进行了全面的讲解。
Immer 可以在需要使用不可变数据结构的任何上下文中使用。例如与 React state、React 或 Redux reducers 或者 configuration management 结合使用。不可变的数据结构允许（高效）的变化检测：如果对对象的引用没有改变，那么对象本身也没有改变。此外，它使克隆对象相对便宜：数据树的未更改部分不需要复制，并且在内存中与相同状态的旧版本共享
一般来说，这些好处可以通过确保您永远不会更改对象、数组或映射的任何属性来实现，而是始终创建一个更改后的副本。在实践中，这可能会导致代码编写起来非常麻烦，并且很容易意外违反这些约束。 Immer 将通过解决以下痛点来帮助您遵循不可变数据范式：
- Immer 将检测到意外 mutations 并抛出错误。
- Immer 将不再需要创建对不可变对象进行深度更新时所需的典型样板代码：如果没有 Immer，则需要在每个级别手动制作对象副本。通常通过使用大量
...展开操作。使用 Immer 时，会对draft对象进行更改，该对象会记录更改并负责创建必要的副本，而不会影响原始对象。 - 使用 Immer 时，您无需学习专用 API 或数据结构即可从范例中受益。使用 Immer，您将使用纯 JavaScript 数据结构，并使用众所周知的安全地可变 JavaScript API。
useState + Immer
useState hook 假定存储在其中的任何 state 都被视为不可变的。使用 Immer 可以大大简化 React 组件状态的深度更新。
import { useCallback, useState } from 'react';
import { produce } from 'immer';const TodoList = () => {const [todos, setTodos] = useState([{id: 'React',title: 'Learn React',done: true},{id: 'Immer',title: 'Try Immer',done: false}]);const handleToggle = useCallback((id: any) => {setTodos(produce((draft) => {const todo: any = draft.find((todo) => todo.id === id);todo.done = !todo?.done}));}, []);const handleAdd = useCallback(() => {setTodos(produce((draft) => {draft.push({id: 'todo_' + Math.random(),title: 'a new todo',done: false})}));}, [])return (<div><button onClick={handleAdd}>新增</button><div className="list-c">{todos.map(item => {return (<ul key={item.id} className={item.done ? 'done' : ''}><li>{item.id}</li><li>{item.title}</li><li style={{color: 'blue', paddingLeft: '20px', cursor: 'pointer'}} onClick={()=>handleToggle(item.id)}>change done</li></ul>)})}</div></div>)
}export default TodoList;useImmer
可以省掉 produce 包装的更新模式。
import { useCallback } from 'react';
import { useImmer } from 'use-immer';const TodoList = () => {const [todos, setTodos] = useImmer([{id: 'React2',title: 'Learn React 2',done: true},{id: 'Immer2',title: 'Try Immer 2',done: false}]);const handleToggle = useCallback((id: any) => {setTodos((draft) => {const todo: any = draft.find((todo) => todo.id === id);todo.done = !todo.done;})}, [])const handleAdd = useCallback(() => {setTodos((draft) => {draft.push({id: 'todo2_' + Math.random(),title: 'A new todo 2',done: false})})}, [])return (<div><button onClick={handleAdd}>新增</button><div className="list-c">{todos.map(item => {return (<ul key={item.id} className={item.done ? 'done' : ''}><li>{item.id}</li><li>{item.title}</li><li style={{color: 'blue', paddingLeft: '20px', cursor: 'pointer'}} onClick={()=>handleToggle(item.id)}>change done</li></ul>)})}</div></div>)
}export default TodoList;useReducer + Immer
与 useState 类似，需要使用 produce 包装的更新模式，useReducer 也与 Immer 巧妙结合
import { useCallback, useReducer } from 'react';
import { produce } from 'immer';const TodoList = () => {const [todos, dispatch] = useReducer(produce((draft, action) => {switch (action.type) {case 'toggle':const todo: any = draft.find(todo => todo.id === action.id);todo.done = !todo.done;break;case 'add':draft.push({id: action.id,title: 'A new todo 3',done: false})break;default:break;}}),[{id: 'React3',title: 'Learn React 3',done: true},{id: 'Immer3',title: 'Try Immer3',done: false}])const handleToggle = useCallback((id) => {dispatch({type: 'toggle',id: id})}, [])const handleAdd = useCallback(() => {dispatch({type: 'add',id: 'todo3_' + Math.random()})}, [])return (<div><button onClick={handleAdd}>新增</button><div className="list-c">{todos.map(item => {return (<ul key={item.id} className={item.done ? 'done' : ''}><li>{item.id}</li><li>{item.title}</li><li style={{color: 'blue', paddingLeft: '20px', cursor: 'pointer'}} onClick={()=>handleToggle(item.id)}>change done</li></ul>)})}</div></div>)
}export default TodoList;useImmerReducer
useImmerReducer Reducer方式省去 produce 包装的更新模式。
import { useCallback } from 'react';
import { useImmerReducer } from 'use-immer';const TodoList = () => {const [todos, dispatch] = useImmerReducer((draft, action: any) => {switch (action.type) {case 'toggle':const todo = draft.find((todo) => todo.id === action.id);todo.done = !todo.done;break;case 'add':draft.push({id: action.id,title: 'A new todo 4',done: false})break;case default:break;}},[{id: 'React4',title: 'Learn React 4',done: true},{id: 'Immer4',title: 'Try Immer4',done: false}]);const handleToggle = useCallback((id) => {dispatch({type: 'toggle',id})}, []);const handleAdd = useCallback(() => {dispatch({type: 'add',id: 'todo4_' + Math.random()})}, []);return (<div><button onClick={handleAdd}>新增</button><div className="list-c">{todos.map(item => {return (<ul key={item.id} className={item.done ? 'done' : ''}><li>{item.id}</li><li>{item.title}</li><li style={{color: 'blue', paddingLeft: '20px', cursor: 'pointer'}} onClick={()=>handleToggle(item.id)}>change done</li></ul>)})}</div></div>)
}export default TodoList;React构建万亿级应用的工业级框架 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享