Skip to main content

CurateClick

www.npmjs.com favicon

React Mug

React Mug 是一个简洁、函数式、贴合 React 组件化机制并拥有完善 Hook 集成的状态管理库。它通过类似马克杯的容器概念来盛装状态,提供简单直观的 API 来管理应用状态。

Check out React Mug on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

文章链接 内容摘录...在重新认识了上面的状态库后,我逐渐总结发现一个 React 状态库的特性按照重要性可以排序为::简洁。:函数式。:贴合编程语言自身的组件化机制。:完善的 Hook 集成。而现有的状态库拥有的特性为:| | | | | || ------- | -------- | -------- | ----------------- | ----------------- || Redux | 🔴 | 🟢 | 🟡 | 🟢 || MobX | 🟢 | 🔴 | 🟢 | 🟡 || Zustand | 🟢 | 🔴 | 🔴 | 🟢 || Jotai | 🟢 | 🔴 | 🔴 | 🟢 |🟢 完全拥有 🟡 部分拥有 🔴 没有所以抱着点亮以上全部特性的心愿,我写了 React Mug:| | | | | || --------- | -------- | -------- | -------- | -------- || React Mug | 🟢 | 🟢 | 🟢 | 🟢 |...React Mug 的包名为 react-mug,当前版本 ,用喜欢的包管理器安装就可以使用了,比如我喜欢直接用 :下面我用一个 “加鱼” 的简单例子带大家快速感受一下。首先声明一个盛装 “鱼的数量” 状态的 Mug。所谓 Mug,就是马克杯的那个马克,而状态就是马克杯里的咖啡,声明一个 Mug 就拥有了一个盛装某个状态的容器,这里的状态便是 “鱼的数量”, 字段既表示了当前对象是一个 Mug 也设置了当前 Mug 里状态的初始值:然后创建一个 “加鱼” 的写操作器。加鱼顾名思义就是增加一条鱼 🐟:之后分别创建 “展示鱼的数量” 和 “操控鱼的数量” 的两个 React 组件:最后渲染这两个组件就可以在点击 “加鱼” 按钮的时候让 “鱼的数量” 加 1 了,除了以上代码不需要进行任何额外的配置。...

Latest Weekly Picks

promptbuilder.cc favicon
Weekly Pick

Generate, optimize, test, and manage AI prompts in one place. Turn an idea into a ready-to-use prompt in seconds.

Prompt Builder
freqz.net favicon
Weekly Pick

Your Personal K-Style Vibe Photo Studio

Freqz
webleadr.com favicon
Weekly Pick

Find and contact web design leads and businesses without websites, like local dentists, effortlessly from any location in just a few clicks.

Webleadr

the art of having something to say

pretty-scale.com favicon
Weekly Pick

How Pretty Are You? Let AI Decide.

Pretty Scale
c2story.com favicon
Weekly Pick

Create Illustrated Stories with AI

C2story

Impromptu Speech Topics & Timer

Seedance 2.0: Multimodal AI video creator. Precisely direct characters and cameras to create production-ready, multi-shot cinematic stories in one click.