首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >忘掉 Redux,拥抱 Zutand 和 Jotai 的全新世界

忘掉 Redux,拥抱 Zutand 和 Jotai 的全新世界

作者头像
井九
发布于 2024-10-12 01:42:41
发布于 2024-10-12 01:42:41
25301
代码可运行
举报
文章被收录于专栏:四楼没电梯四楼没电梯
运行总次数:1
代码可运行

Redux 在现代 React 开发中存在着一些明显的局限性。

首先,Redux 的心智负担较重。它涉及到众多概念,如 Store、Reducer、Action 等,对于初学者来说,理解和掌握这些概念需要花费较多的时间和精力。而且,Redux 要求严格遵循其特定的架构和模式,这在一定程度上限制了开发者的灵活性,增加了开发的复杂性。

其次,开发过程较为繁琐。在 Redux 中,每次新增功能都需要定义相应的 Reducer、Action Creator 等,同时还需要处理各种模板代码,导致文件切换频繁,开发效率低下。此外,Redux 对于状态的修改必须通过派发 Action 并由纯函数 Reducer 处理,这种严格的规定在某些简单场景下显得过于繁琐。

再者,复杂的异步任务管理也是 Redux 的一个痛点。虽然有一些解决方案如 Redux-thunk、Redux-saga 等,但它们也带来了额外的学习成本和代码复杂度。在处理多个异步任务的并行、串行等复杂关系时,Redux 及其相关中间件的配置和管理并不直观,容易出现错误且难以调试。

总之,尽管 Redux 为状态管理提供了一种可预测和可控的方式,但由于其心智负担、开发繁琐和复杂异步任务管理等问题,在现代 React 开发中,开发者可能会寻求更轻量、更便捷的状态管理方案。

二、Zutand 的魅力所在

(一)轻量高效

Zutand 以其轻量高效的特点吸引着开发者。它采用简洁的设计,核心代码量少,减少了不必要的复杂性。在实现高效的状态管理方面,Zutand 巧妙地运用了现代 JavaScript 的特性,例如钩子函数(Hooks),避免了繁琐的配置和大量的样板代码。其状态更新机制直接而高效,只在状态值发生实际变化时触发相关组件的重新渲染,极大地提高了应用的性能和响应速度。

(二)灵活的状态存储

Zutand 在状态存储方面表现出极高的灵活性。它不仅支持全局的状态存储,使整个应用可以共享关键的状态信息,还允许分散存储,方便各个组件根据自身需求管理局部状态。这种灵活性使得开发者能够根据具体的应用场景和架构需求,合理地组织和管理状态,避免了不必要的状态传播和混乱。

(三)优秀的特性与功能

Zutand 具备许多优秀的特性和功能。它能够自动对比状态的新旧值,精确判断是否需要触发组件的重新渲染,确保了应用的性能优化。此外,Zutand 还支持派生状态,允许开发者基于现有状态计算和衍生出新的状态,增强了状态管理的灵活性和可扩展性。同时,Zutand 与 React 的集成紧密且自然,为开发者提供了流畅的开发体验。

三、Jotai 的独特优势

(一)原子化设计理念

Jotai 的原子化设计理念是其独特之处。在状态管理中,原子化意味着将状态拆分成最小的、独立的单元,即原子(Atoms)。每个原子都可以独立管理和更新自身的状态,而不会影响其他原子。这种设计使得状态管理更加模块化和可维护。

例如,当一个原子的状态发生变化时,只有依赖于该原子的组件会进行重新渲染,而不会导致整个应用的大规模重绘,从而提高了性能和效率。同时,原子化也便于开发者更清晰地理解和管理应用的状态结构,避免了状态的混乱和不可控。

(二)简单易用的 API

Jotai 提供了简洁直观的 API,极大地提升了开发效率。其核心的 atom、useAtom 等函数使用起来非常方便。

atom 函数用于创建原子,定义状态的初始值和更新逻辑。而 useAtom 钩子则允许组件轻松地读取和更新原子的状态,就像使用 useState 一样简单直接。

例如,通过 const [value, setValue] = useAtom(atom) 这样的简洁代码,开发者可以快速获取和修改状态,无需复杂的配置和中间环节。

这种简单易用的 API 降低了开发者的学习成本,让开发者能够更专注于业务逻辑的实现,而不是被状态管理的复杂性所困扰。

(三)强大的扩展能力

Jotai 具有强大的扩展能力,能够满足复杂业务的需求。它可以通过中间件来扩展功能,如处理异步操作、日志记录、状态持久化等。

此外,Jotai 还支持派生状态,开发者可以基于现有原子轻松派生出新的状态,满足复杂的计算和逻辑需求。同时,Jotai 也与其他库和工具具有良好的兼容性,可以与其他状态管理库或框架集成,为开发者提供了更多的灵活性和选择。

例如,在处理复杂的异步数据获取和处理时,通过添加适当的中间件,Jotai 能够有效地管理状态的变化和组件的更新,确保应用的稳定和高效运行。

四、实际应用案例

(一)使用 Zutand 构建购物车应用

假设我们正在构建一个简单的购物车应用。首先,使用 Zutand 创建一个存储购物车物品的状态:

代码语言:javascript
代码运行次数:0
运行
复制
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import create from 'zustand';

const useCartStore = create((set) => ({

items: [],

addItem: (item) => set((state) => ({ items: [...state.items, item] })),

removeItem: (itemId) => set((state) => ({ items: state.items.filter((item) => item.id!== itemId) }))

}));

在组件中,可以这样使用:

代码语言:javascript
代码运行次数:0
运行
复制
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function ShoppingCart() {

const { items, addItem, removeItem } = useCartStore();

return (

<div>

<ul>

{items.map((item) => (

<li key={item.id}>{item.name} <button onClick={() => removeItem(item.id)}>Remove</button></li>

))}

</ul>

<button onClick={() => addItem({ id: 1, name: 'Product 1' })}>Add Product</button>

</div>

);

}
(二)使用 Jotai 实现用户登录状态管理

以用户登录状态的管理为例,使用 Jotai 来实现:

代码语言:javascript
代码运行次数:0
运行
复制
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { atom } from 'jotai';

const isLoggedInAtom = atom(false);

function LoginComponent() {

const [isLoggedIn, setIsLoggedIn] = useAtom(isLoggedInAtom);

const handleLogin = () => setIsLoggedIn(true);

const handleLogout = () => setIsLoggedIn(false);

return (

<div>

{isLoggedIn? 'Logged in' : 'Not logged in'}

<button onClick={handleLogin}>Login</button>

<button onClick={handleLogout}>Logout</button>

</div>

);

}

通过这些实际应用案例,可以清晰地看到 Zutand 和 Jotai 在处理不同业务场景时的高效性和便利性,为开发者提供了简洁且强大的状态管理解决方案。

五、未来展望

(一)技术演进与创新

随着前端技术的不断发展,Zutand 和 Jotai 有望在状态管理的技术层面持续演进和创新。可能会引入更高效的状态更新机制、更智能的依赖追踪算法,以进一步提升性能和响应速度。同时,对于异步操作和错误处理的支持可能会更加完善,使其能够更好地应对复杂的业务场景。

(二)社区与生态发展

强大的社区和丰富的生态对于一个库的发展至关重要。预计 Zutand 和 Jotai 的社区将不断壮大,吸引更多的开发者贡献代码、分享经验和创建相关的扩展插件。这将丰富它们的功能,满足更多个性化的需求。

(三)与新兴技术的融合

在未来,Zutand 和 Jotai 可能会与新兴的前端技术,如 Server Components、WebAssembly 等进行融合,以提供更全面、更强大的解决方案。它们可能会适应新的开发模式和架构,为开发者带来更多的便利和创新的可能性。

(四)在大型项目中的应用

随着功能的增强和稳定性的提高,Zutand 和 Jotai 有望在大型复杂项目中得到更广泛的应用。它们可能会成为大型企业级应用首选的状态管理工具之一,为开发者在处理大规模状态和复杂业务逻辑时提供更可靠的支持。

总之,Zutand 和 Jotai 在未来具有广阔的发展前景,将继续为 React 开发者提供更优质、更高效的状态管理体验。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-08-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何在 React 应用中使用 Hooks、Redux 等管理状态
大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。
若川
2022/11/11
9.3K0
如何在 React 应用中使用 Hooks、Redux 等管理状态
聊聊两个状态管理库 Redux & Recoil
React 是一个十分优秀的UI库, 最初的时候, React 只专注于UI层, 对全局状态管理并没有很好的解决方案, 也因此催生出类似Redux 这样优秀的状态管理工库。
皮小蛋
2020/08/25
3.8K0
聊聊两个状态管理库 Redux & Recoil
放弃Redux吧,转投Zustand吧
Zustand 的核心思想是将状态管理与组件分离,从而使得状态管理更加集中化,同时保持了 React 的响应性和组件的可重用性。它提供了一种简单的 API,使得开发者能够轻松地在应用程序中的任何地方访问和修改状态。 使用 Zustand,开发者可以通过创建一个 store 来存储和管理应用程序的状态。这个 store 是通过调用 createStore 方法并传入一个包含状态和操作的 object 来创建的。
用户6297767
2024/04/01
9180
深度解析——Vue与React的核心差异
| 维度 | Vue 3 | React 18 |
裕贞
2025/02/17
3140
深度解析——Vue与React的核心差异
深入理解 Redux 原理及其在 React 中的使用流程
大家好,我是腾讯云开发者社区的 Front_Yue,随着前端开发技术的不断发展,开发者们越来越注重应用的可维护性、可扩展性和稳定性。而状态管理库 Redux 的出现,为我们的应用提供了一种优雅的状态管理方案。本篇文章将详细介绍 Redux 的原理以及如何在 React 项目中使用 Redux。
Front_Yue
2024/06/10
1.3K0
深入理解 Redux 原理及其在 React 中的使用流程
如何提高redux开发效率?当然是redux-tookit啦!
使用 react-redux 的朋友都经历过这种痛苦吧? 定义一个 store 仓库,首先创建各种文件,比如 reducer、action、store...,然后 将 redux 和 react 连接使用。整个流程繁琐,写起来代码冗余。 react-redux 创建仓库,文件目录如下:
程序员王天
2023/10/18
4930
如何提高redux开发效率?当然是redux-tookit啦!
从 Recoil 到 Jotai (上)
偶然的一次项目开发中发现 Recoil 有内存泄漏的情况,一次几 M ,虽然影响不大,但是还是具有一定的隐患,特别是随着项目的体量增加,后期带来的替换成本也会随之增高;
不换
2024/04/30
2710
从 Recoil 到 Jotai (上)
Zustand:让React状态管理更简单、更高效
在React项目开发中,状态管理一直是一个绕不开的话题。很多人提到状态管理,第一时间会想到Redux。Redux作为一个历史悠久的库,确实在功能性和中间件生态方面都有着不错的表现,但它复杂的配置和繁琐的代码书写让许多开发者望而却步。
前端达人
2024/03/27
2K0
Zustand:让React状态管理更简单、更高效
2023再谈前端状态管理
状态是表示组件当前状况的 JS 对象。在 React 中,可以使用 useState 或者 this.state 维护组件内部状态,通过 props 传递给子组件使用。
zz_jesse
2023/08/21
1.3K0
2023再谈前端状态管理
原子化状态管理库 Jotai,它和 Zustand 有啥区别?
用 createContext 创建了 context,其中保存了 2 个useState 的 state 和 setState 方法。
神说要有光zxg
2024/04/17
9960
原子化状态管理库 Jotai,它和 Zustand 有啥区别?
Vue框架加持:用极简代码实现复杂业务逻辑
在现代前端开发中,Vue 凭借其轻量级、高效和渐进式的特性,成为开发复杂应用的首选框架之一。在日常开发中,我们往往需要面对复杂的业务需求,但通过 Vue 的特性和工具,我们可以用极简的代码实现清晰、优雅的解决方案。本文将重点围绕 Vue3 的组合式 API 和其核心生态,展示如何通过简洁的代码应对复杂的业务场景。
叫我阿柒啊
2024/12/18
2790
「前端架构」使用React进行应用程序状态管理
管理状态可以说是任何应用程序中最难的部分。这就是为什么有这么多的状态管理库可用,而且每天都有更多的库出现(甚至有些库是建立在其他库之上的。。。npm上有数百个“更简单的Redux”的摘要)。尽管状态管理是一个很难解决的问题,但我认为,使之如此困难的一个原因是我们经常过度设计解决问题的方法。
架构师研究会
2020/11/06
3.3K0
依赖追踪?Signal?如果你想要,React 中也能实现
弱侵入性一个比较显著的体现就是,当你觉得你不喜欢 React 自带的 useState、useEffect 时,你可以轻松植入你自己的开发思维。把他调整成为你喜爱的形状。
用户6901603
2024/01/17
5430
依赖追踪?Signal?如果你想要,React 中也能实现
使用Redux制作一个TodoList
在组件化开发的 web 前端当中,经常的需要在不同的组件之间进行通信以及一些数据共享,那么我们就需要使用像 Vuex 那样的状态管理工具,在 React 当中,经常使用 Redux 来做状态管理工具。
小小杰啊
2022/12/21
5480
使用Redux制作一个TodoList
使用 React Hooks 代替 Redux
React Hooks 面世也有很大一段时间了。我相信很多人对于 Hooks 的认知还大概处在:
Nealyang
2019/11/27
1.7K0
React?设计模式?
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
前端柒八九
2023/11/27
6530
React?设计模式?
浅析 5 种 React 组件设计模式
复合组件模式是一种通过将多个简单组件组合在一起创建更复杂组件的方法。这种模式使得组件的逻辑分离,每个简单组件负责特定的功能。通过复合组件,可以轻松构建可复用的、功能完备的组件。
政采云前端团队
2024/01/11
9760
浅析 5 种 React 组件设计模式
React useReducer 终极使用教程
useReducer 是在 react V 16.8 推出的钩子函数,从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学,大都会经历从 class 语法向 hooks 用法的转变,react 的 hooks 编程给我们带来了丝滑的函数式编程体验,同时很多前端著名的文章也讲述了 hooks 带来的前端心智的转变,这里就不再着重强调,本文则是聚焦于 useReducer 这个钩子函数的原理和用法,笔者带领大家再一次深入认识 useReducer。
蒋川@卡拉云
2022/08/31
4.1K0
React useReducer 终极使用教程
Redux(一):基本概念
React是一个单向数据流的view层框架,单向数据流、组件化、生命周期是其特点。在React组件关系中,组件状态由自己管理,父子组件通过props传递;兄弟组件那么就需要一个共同的父组件作中转;如果涉及层级比较深的话一层一层传递会非常麻烦。所以大量状态共享是React单独难以解决的问题。
Ashen
2020/06/01
1.4K0
JavaScript与Vue:现代前端开发的完美组合
JavaScript作为Web开发的基石,经历了从jQuery到三大框架的演进历程。在React、Angular和Vue的竞争中,Vue以其渐进式架构、低学习曲线和卓越的性能脱颖而出。2023年State of JS报告显示,Vue的满意度高达89%,成为最受欢迎的前端框架之一。
熊猫钓鱼
2025/08/01
1060
相关推荐
如何在 React 应用中使用 Hooks、Redux 等管理状态
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档