Jotai

介绍

Jotai 受 Recoil 启发的原子模型采用自下而上的方法来进行 React 状态管理。 可以通过组合原子来构建状态，并且渲染基于原子依赖性进行优化。 这解决了 React 上下文的额外重新渲染问题，并消除了对 memoization 技术的需要。

核心 API

Jotai 有一个非常小的 API，并且是面向 TypeScript 的。 它与 React 的集成 useState hook 一样简单易用，但所有状态都是全局可访问的，派生状态易于实现，并且自动消除了额外的重新渲染。

import { atom, useAtom } from 'jotai'

// 创建你的原子和衍生物
const textAtom = atom('hello')
const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase()
)

// 在您的应用程序中的任何位置使用它们
const Input = () => {
  const [text, setText] = useAtom(textAtom)
  const handleChange = (e) => setText(e.target.value)
  return (
    <input value={text} onChange={handleChange} />
  )
}

const Uppercase = () => {
  const [uppercase] = useAtom(uppercaseAtom)
  return (
    <div>Uppercase: {uppercase}</div>
  )
}

// 现在你有了组件
const App = () => {
  return (
    <>
      <Input />
      <Uppercase />
    </>
  )
}

额外的 utilities

Jotai 包还包括一个 jotai/utils 包。 这些函数增加了对在 localStorage（或 URL 哈希）中保留原子状态、在服务器端渲染期间混合原子状态、创建具有 set 函数（包括类似 Redux 的 reducers 和 action 类型）的原子等等的支持！

import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// 设置字符串键和初始值
const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {
  // 像任何其他原子一样使用持久化状态
  const [darkMode, setDarkMode] = useAtom(darkModeAtom)
  const toggleDarkMode = () => setDarkMode(!darkMode)
  return (
    <>
      <h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
      <button onClick={toggleDarkMode}>toggle theme</button>
    </>
  )
}

第三方集成

每个官方第三方集成还有额外的捆绑包。 Immer、Optics、Query、XState、Valtio、Zustand、Redux 和 URQL。

一些集成提供了具有备用集合函数的新原子类型，例如 atomWithImmer，而其他集成则提供了具有与其他状态管理库的双向数据绑定的新原子类型，例如与 Redux 存储绑定的 atomWithStore。

import { useAtom } from 'jotai'
import { atomWithImmer } from 'jotai/immer'

// 使用基于 immer 的写入函数创建一个新原子
const countAtom = atomWithImmer(0)

const Counter = () => {
  const [count] = useAtom(countAtom)
  return (
    <div>count: {count}</div>
  )
}

const Controls = () => {
  // setCount === update: (draft: Draft<Value>) => void
  const [, setCount] = useAtom(countAtom)
  const increment = () => setCount((c) => (c = c + 1))
  return (
    <button onClick={increment}>+1</button>
  )
}

学习更多

查看 Jotai 的创建者 Daishi 的免费 Egghead 课程。