文章链接https://juejin.cn/post/7410601890793521193## 内容摘录...在重新认识了上面的状态库后，我逐渐总结发现一个 React 状态库的特性按照重要性可以排序为：特性 1：简洁。特性 2：函数式。特性 3：贴合编程语言自身的组件化机制。特性 4：完善的 Hook 集成。而现有的状态库拥有的特性为：| | 特性 1 | 特性 2 | 特性 3 | 特性 4 || ------- | -------- | -------- | ----------------- | ----------------- || Redux | 🔴 | 🟢 | 🟡^[1] | 🟢 || MobX | 🟢 | 🔴 | 🟢 | 🟡^[2] || Zustand | 🟢 | 🔴 | 🔴 | 🟢 || Jotai | 🟢 | 🔴 | 🔴 | 🟢 |🟢 完全拥有 🟡 部分拥有 🔴 没有<div><span>[1]</span>：有独立的组件化机制，但是不贴合编程语言自身。</div><div><span>[2]</span>：有 Hook 集成，但是不完善。</div>所以抱着点亮以上全部特性的心愿，我写了 React Mug：| | 特性 1 | 特性 2 | 特性 3 | 特性 4 || --------- | -------- | -------- | -------- | -------- || React Mug | 🟢 | 🟢 | 🟢 | 🟢 |...React Mug 的包名为 react-mug，当前版本 0.1.0，用喜欢的包管理器安装就可以使用了，比如我喜欢直接用 npm：shnpm i react-mug下面我用一个 “加鱼” 的简单例子带大家快速感受一下。首先声明一个盛装 “鱼的数量” 状态的 Mug。所谓 Mug，就是马克杯的那个马克，而状态就是马克杯里的咖啡，声明一个 Mug 就拥有了一个盛装某个状态的容器，这里的状态便是 “鱼的数量”，[construction] 字段既表示了当前对象是一个 Mug 也设置了当前 Mug 里状态的初始值：tsximport { Mug, construction } from 'react-mug';const fishesMug: Mug<number> = { [construction]: 10,};然后创建一个 “加鱼” 的写操作器。加鱼顾名思义就是增加一条鱼 🐟：tsximport { w } from 'react-mug';const increment = w((n: number) => n + 1);之后分别创建 “展示鱼的数量” 和 “操控鱼的数量” 的两个 React 组件：tsximport { check, useOperator } from 'react-mug';function Fishes() { const fishes = useOperator(check, fishesMug); return <div>鱼的数量：{fishes}</div>;}function Controls() { return <button onClick={() => increment(fishesMug)}>加鱼</button>;}最后渲染这两个组件就可以在点击 “加鱼” 按钮的时候让 “鱼的数量” 加 1 了，除了以上代码不需要进行任何额外的配置。...