valtio / zustand / jotai /nanostores comparsion

叠甲: 一些个人理解, 并不是大而全的比较.

store value in

name	store value in
valtio	in global store
zustand	in global store
nanostores	in global store
jotai	context level store

例如 nanostore.atom v.s jotai.atom

import { atom } from 'nanostores'
export const $counter = atom(0)
$counter.set($counter.get() + 1)

import { atom } from 'jotai'
export const counter = atom(0)
function Counter() {
  const [count, setCount] = useAtom(counter)
  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  )
}

• nanostore $counter.set 可以判断 state 就是存在于 $counter atom 中
• jotai atom 创建的是 config, 数据存在于 context level store 中, atom 更像 store key, 所以会看到 setCount 需要从 useAtom 中获取

zustand & jotai

from jotai docs

To hold states, Both have stores that can exist either at module level or at context level. Jotai is designed to be context first, and module second. Zustand is designed to be module first, and context second.