Jotai 进阶指南：原子嵌套与动态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00416/article/details/148362756

Jotai 进阶指南：原子嵌套与动态管理

jotai 👻 Primitive and flexible state management for React 项目地址: https://gitcode.com/gh_mirrors/jo/jotai

原子嵌套的概念解析

在 Jotai 状态管理库中，原子(atom)是状态的基本单位。但很多人不知道的是，原子本身也可以作为值存储在另一个原子中，这种模式被称为"原子嵌套"(Atoms in atom)。这种高级用法为状态管理提供了更灵活的组织方式。

基础用法：在组件状态中存储原子

我们可以将原子配置存储在 React 的 useState 中，实现动态选择不同的原子：

const DynamicAtomSelector = ({ atomA, atomB }) => {
  const [currentAtom, setCurrentAtom] = useState(atomA)
  const [value] = useAtom(currentAtom)
  
  return (
    <div>
      当前值: {value}
      <button onClick={() => setCurrentAtom(atomA)}>选择原子A</button>
      <button onClick={() => setCurrentAtom(atomB)}>选择原子B</button>
    </div>
  )
}

这种模式特别适合需要根据不同条件切换数据源的场景。

动态创建原子

更有趣的是，我们可以在运行时动态创建原子：

const DynamicAtomCreator = () => {
  const [currentAtom, setCurrentAtom] = useState(() => atom(0))
  const [count, setCount] = useAtom(currentAtom)
  
  return (
    <div>
      计数: {count}
      <button onClick={() => setCount(c => c + 1)}>增加</button>
      <button onClick={() => setCurrentAtom(atom(0))}>重置</button>
    </div>
  )
}

每次点击"重置"按钮都会创建一个全新的原子实例，这在需要隔离状态时非常有用。

原子嵌套的实际应用

1. 原子引用原子

我们可以创建一个原子来引用其他原子：

const firstNameAtom = atom('张')
const lastNameAtom = atom('三')

const currentNameAtom = atom(firstNameAtom)

const NameSwitcher = () => {
  const [nameAtom, setNameAtom] = useAtom(currentNameAtom)
  const [name] = useAtom(nameAtom)
  
  return (
    <div>
      当前姓名: {name}
      <button onClick={() => setNameAtom(firstNameAtom)}>显示姓氏</button>
      <button onClick={() => setNameAtom(lastNameAtom)}>显示名字</button>
    </div>
  )
}

2. 派生原子

基于嵌套原子创建派生原子：

const derivedNameAtom = atom((get) => {
  const nameAtom = get(currentNameAtom)
  return get(nameAtom)
})

// 简洁写法
const derivedNameAtom = atom((get) => get(get(currentNameAtom)))

这种模式可以创建复杂的状态依赖关系，同时保持响应式更新。

集合中的原子嵌套

1. 原子数组

将多个原子存储在数组原子中：

const countersAtom = atom([atom(1), atom(2), atom(3)])

const Counter = ({ counterAtom }) => {
  const [count, setCount] = useAtom(counterAtom)
  return (
    <div>
      {count} <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  )
}

const CounterList = () => {
  const [counters, setCounters] = useAtom(countersAtom)
  
  const addCounter = () => {
    const newCounter = atom(0)
    setCounters(prev => [...prev, newCounter])
  }
  
  return (
    <div>
      {counters.map((counterAtom) => (
        <Counter counterAtom={counterAtom} key={counterAtom} />
      ))}
      <button onClick={addCounter}>添加计数器</button>
    </div>
  )
}

这种模式的优势在于，当某个计数器更新时，只有对应的 Counter 组件会重新渲染，其他计数器不受影响。

2. 原子映射

同样，我们可以使用对象来组织原子：

const productPricesAtom = atom({
  apple: atom(15),
  orange: atom(12),
  banana: atom(8),
})

const Product = ({ name, priceAtom }) => {
  const [price] = useAtom(priceAtom)
  return <div>{name}: ￥{price}</div>
}

const ProductList = () => {
  const [products] = useAtom(productPricesAtom)
  return (
    <div>
      {Object.entries(products).map(([name, priceAtom]) => (
        <Product name={name} priceAtom={priceAtom} key={name} />
      ))}
    </div>
  )
}