Jotai 是什么？
Primitive and flexible state management for React
引用官方原話，Jotai 是一個原始且靈活的 React 狀態(tài)管理庫
- 原始：API 都是以
Hooks方式提供，使用方式類似于useState果录，useReducer - 靈活：可以組合多個
Atom來創(chuàng)建新的Atom涛贯，并且支持異步
同時，我認(rèn)為 Jotai 稱得上是一個小巧进每、簡潔且高性能的狀態(tài)管理庫
Jotai 可以看作是 Recoil 的簡化版，使用了 Atom + Hook + Context命斧，用于解決 React 全局?jǐn)?shù)據(jù)流管理的問題
Atom 是 Jotai 中狀態(tài)管理單位田晚，它是可以更新和訂閱的，當(dāng) Atom 被更新時国葬，訂閱了這個 Atom 的組件便會使用新值重新渲染
并且贤徒，更新對應(yīng)的 Atom 只會重新渲染訂閱了這個 Atom 的組件芹壕，并不會像 Context 那樣導(dǎo)致整個父組件重新渲染，所以可以做到精確渲染
Jotai 與 Recoil 有何不同接奈？
Jotai 和 Recoil 概念很相似踢涌，都是采用分散管理原子狀態(tài)的設(shè)計(jì)模式
所以在用法上也比較相似，但相比之下序宦，還有以下優(yōu)點(diǎn)
-
Jotai的 API 相對Recoil簡潔很多睁壁，并且容易使用 -
Jotai不需要用RecoilRoot或Provider等組件包裹，使得結(jié)構(gòu)可以更簡潔 -
Jotai定義Atom時不用提供key -
Jotai更小巧互捌，大小僅 2.4 kB -
Jotai對TypeScript的支持更好
如何使用 Jotai 堡僻？
安裝 Jotai
npm install jotai
定義 Atom
一個 Atom 代表一個狀態(tài)
使用 atom 函數(shù)可以創(chuàng)建一個 Atom ，需要傳入一個參數(shù)疫剃，用來指定初始值钉疫，值可以是字符串、數(shù)字巢价、對象牲阁、數(shù)組等
import { atom } from "jotai";
const valueAtom = atom(0);
使用 Atom
useAtom 函數(shù)接受一個參數(shù)，參數(shù)值為 一個 Atom
返回值是一個數(shù)組
數(shù)組第一個值是 Atom 存儲的值壤躲，第二個值是更新 Atom 值的函數(shù)
import { useAtom } from "jotai";
const Component = () => {
// 與 React.useState 的用法相似
// const [value, setValue] = useState(defaultValue);
const [value, setValue] = useAtom(valueAtom);
}
完整代碼
下面的代碼已經(jīng)在 CodeSandbox 寫好城菊，可以點(diǎn)開下面的鏈接，在線運(yùn)行代碼
import { atom, useAtom } from "jotai";
// 定義一個Atom碉克，并給定默認(rèn)值0
const valueAtom = atom(0);
// 顯示區(qū)域
const Text = () => {
// 使用這個Atom
// 與 React.useState 的用法相似
// const [value, setValue] = useState(defaultValue);
const [value] = useAtom(valueAtom);
return <div>{value}</div>;
};
// 按鈕區(qū)域
const Button = () => {
// 第一個值這里用不到凌唬，只要第二個值，更新函數(shù)
const [, setValue] = useAtom(valueAtom);
// 使用setValue函數(shù)即可更新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>
);
};
總結(jié)
如果你覺得 Redux 心智負(fù)擔(dān)太重漏麦，用起來太繁瑣客税，想要一個輕量，容易使用且性能不錯的狀態(tài)管理庫撕贞，那就試試看 Jotai 吧
相關(guān)鏈接
原文
輕量且高性能的 React 狀態(tài)管理庫 Jotai
Github 上面有更詳細(xì)的文檔以及用例
關(guān)于 Recoil 的文章
