## 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 ```bash npm install jotai ``` ### 定义 Atom 一个 `Atom` 代表一个状态使用 `atom` 函数可以创建一个 `Atom` ，需要传入一个参数，用来指定初始值，值可以是字符串、数字、对象、数组等 ```ts import { atom } from "jotai"; const valueAtom = atom(0); ``` ### 使用 Atom `useAtom` 函数接受一个参数，参数值为一个 `Atom` 返回值是一个数组数组第一个值是 `Atom` 存储的值，第二个值是更新 `Atom` 值的函数 ```ts import { useAtom } from "jotai"; const Component = () => { // 与 React.useState 的用法相似 // const [value, setValue] = useState(defaultValue); const [value, setValue] = useAtom(valueAtom); } ``` ### 完整代码下面的代码已经在 CodeSandbox 写好，可以点开下面的链接，在线运行代码 [在线运行代码](https://codesandbox.io/s/jotai-example-simple-58i8i?file=/src/App.tsx) ```ts 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

{value}

; }; // 按钮区域 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 (

); }; export default () => { return (

); }; ``` ## 总结如果你觉得 `Redux` 心智负担太重，用起来太繁琐，想要一个轻量，容易使用且性能不错的状态管理库，那就试试看 `Jotai` 吧 ## 相关链接 Github 上面有更详细的文档以及用例 [Jotai Github](https://github.com/pmndrs/jotai) 关于 Recoil 的文章 [Facebook 新一代 React 状态管理库 Recoil](https://juejin.cn/post/6881493149261250568)