immer 和useImmer两个库有啥区别

immer 和useImmer两个库有啥区别

immeruseImmer 是两个紧密相关的库,但它们在用途上有一定的区别:

immer:
immer 是一个 JavaScript 库,专注于提供一种简洁高效的不可变数据管理方式。它利用 Proxy 对象和 WeakMap 实现了所谓的“proxy-based immutability”,允许开发者以直观的可变方式操作数据,而实际上并不会改变原始数据,而是创建一个全新的、经过更新的不可变对象。这样既保证了数据的安全性(避免意外修改原始数据),又大大降低了编写纯函数式代码的复杂度。

import produce from 'immer'; let originalState = { users: [{ id: 1, name: 'Alice' }] }; let nextState = produce(originalState, draft => { draft.users.push({ id: 2, name: 'Bob' }); });

useImmer:
useImmer 是一个基于 immer 库实现的 React Hook。它专门为 React 应用程序设计,用于简化状态管理中的不可变数据更新。在React中,使用 useState 更新复杂的嵌套状态通常较为繁琐,而 useImmer 提供了一种简便的方式来创建可变代理对象,通过这个代理对象修改状态,React组件的状态就会自动更新,并且始终保持不可变原则。

import React from 'react'; import { useImmer } from 'use-immer'; function UserList() { const [users, updateUsers] = useImmer([{ id: 1, name: 'Alice' }]); function addUser(newUser) { updateUsers(draft => { draft.push(newUser); }); } return ( // 渲染用户列表... <button onClick={() => addUser({ id: 2, name: 'Bob' })}>Add User</button> ); }

总结:

  • immer 是底层库,提供了通用的不可变数据更新机制。
  • useImmer 是基于 immer 构建的 React Hook,专为在React组件内部实现状态管理时,以更符合直觉的方式进行不可变数据更新而设计。

那如果在react中直接使用immer该如何书写?
在React中直接使用immer进行状态管理,你可以结合React的useStateuseReducerHook来实现。以下是一个使用useState结合immer的基本示例:

import React, { useState } from 'react'; import produce from 'immer'; function ExampleComponent() { // 初始化状态 const [state, setState] = useState({ users: [{ id: 1, name: 'Alice' }] }); // 使用immer更新状态 function addUser(newUser) { setState((prevState) => produce(prevState, (draft) => { draft.users.push(newUser); }) ); } return ( <div> {/* 渲染用户列表 */} {/* 添加用户按钮 */} <button onClick={() => addUser({ id: 2, name: 'Bob' })}>Add User</button> </div> ); } export default ExampleComponent;

在上述示例中,我们首先导入了immer库的produce函数,然后在组件内部定义了初始状态并使用useState进行管理。
当需要更新状态时,我们不再直接修改状态对象,而是通过produce函数创建一个可变副本(draft),在draft上进行修改。
最后,immer会根据draft的修改情况返回一个新的状态对象,从而实现状态的不可变更新。

当然,如果你的应用程序有更复杂的状态管理需求,也可以结合useReducer Hook 使用immer来处理 reducer 中的状态更新逻辑。


__EOF__

本文作者龙陌
本文链接https://www.cnblogs.com/longmo666/p/18092927.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   龙陌  阅读(395)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示