react 状态管理库 Jotai

Jotai 是一个轻量级、原子化的状态管理库，专为 React 应用设计。与其他状态管理库（如 Redux、MobX 或 Recoil）相比，Jotai 提供了一种更简洁的方式来管理和共享状态，同时保持良好的性能和灵活性。

安装 Jotai

pnpm add jotai

基本用法

定义原子状态

// 定义一个原子
const counterAtom = atom(0)

使用原子状态

export default function Counter() {
    // 使用原子
    const [count, setCount] = useAtom(counterAtom)

    return (
        <div>
            <h1>
                {count}
                <button onClick={() => setCount((c) => c + 1)}>add</button>
            </h1>
        </div>
    )
}

派生原子

const doubleCounterAtom = atom((get) => get(counterAtom) * 2)

异步行为

const numAtom = atom(1)
const asyncReadCountAtom = atom(
    // 异步读取 返回 promise
    async (get) => {
        await new Promise((reslove) => {
            setTimeout(reslove, 1000)
        });
        return get(numAtom)
    },
)

// 异步写
const asyncWriteCountAtom = atom(null, async (get, set) => {
    set(numAtom, get(numAtom) + 1);
})

持久化存储

const theme = atomWithStorage('dark', false)

function ComponentUsingAsyncAtoms() {
    const [asyncCount] = useAtom(asyncReadCountAtom)

    return (
        <p>async num: {asyncCount}</p>
    )
}