Jotai 是什么？
Primitive and flexible state management for React
引用官方原话，Jotai 是一个原始且灵活的 React 状态管理库
- 原始：API 都是以
Hooks方式提供，使用方式类似于useState，useReducer - 灵活：可以组合多个
Atom来创建新的Atom，并且支持异步
同时，我认为 Jotai 称得上是一个小巧、简洁且高性能的状态管理库
Jotai 可以看作是 Recoil 的简化版，使用了 Atom + Hook + Context，用于解决 React 全局数据流管理的问题
Atom 是 Jotai 中状态管理单位，它是可以更新和订阅的，当 Atom 被更新时，订阅了这个 Atom 的组件便会使用新值重新渲染
并且，更新对应的 Atom 只会重新渲染订阅了这个 Atom 的组件，并不会像 Context 那样导致整个父组件重新渲染，所以可以做到精确渲染
Jotai 与 Recoil 有何不同？
Jotai 和 Recoil 概念很相似，都是采用分散管理原子状态的设计模式
所以在用法上也比较相似，但相比之下，还有以下优点
-
Jotai的 API 相对Recoil简洁很多，并且容易使用 -
Jotai不需要用RecoilRoot或Provider等组件包裹，使得结构可以更简洁 -
Jotai定义Atom时不用提供key -
Jotai更小巧，大小仅 2.4 kB -
Jotai对TypeScript的支持更好
如何使用 Jotai ？
安装 Jotai
npm install jotai
定义 Atom
一个 Atom 代表一个状态
使用 atom 函数可以创建一个 Atom ，需要传入一个参数，用来指定初始值，值可以是字符串、数字、对象、数组等
import { atom } from "jotai";
const valueAtom = atom(0);
使用 Atom
useAtom 函数接受一个参数，参数值为 一个 Atom
返回值是一个数组
数组第一个值是 Atom 存储的值，第二个值是更新 Atom 值的函数
import { useAtom } from "jotai";
const Component = () => {
// 与 React.useState 的用法相似
// const [value, setValue] = useState(defaultValue);
const [value, setValue] = useAtom(valueAtom);
}
完整代码
下面的代码已经在 CodeSandbox 写好，可以点开下面的链接，在线运行代码
import { atom, useAtom } from "jotai";
// 定义一个Atom，并给定默认值0
const valueAtom = atom(0);
// 显示区域
const Text = () => {
// 使用这个Atom
// 与 React.useState 的用法相似
// const [value, setValue] = useState(defaultValue);
const [value] = useAtom(valueAtom);
return <div>{value}</div>;
};
// 按钮区域
const Button = () => {
// 第一个值这里用不到，只要第二个值，更新函数
const [, setValue] = useAtom(valueAtom);
// 使用setValue函数即可更新valueAtom的值
const add = () => {
setValue((prev) => prev + 1);
};
const dec = () => {
setValue((prev) => prev - 1);
};
const reset = () => {
setValue(0);
};
return (
<div>
<button onClick={add}>+</button>
<button onClick={dec}>-</button>
<button onClick={reset}>reset</button>
</div>
);
};
export default () => {
return (
<div>
<Text />
<Button />
</div>
);
};
总结
如果你觉得 Redux 心智负担太重，用起来太繁琐，想要一个轻量，容易使用且性能不错的状态管理库，那就试试看 Jotai 吧
相关链接
原文
Github 上面有更详细的文档以及用例
关于 Recoil 的文章
