Lazy

当定义原始原子时，它们的初始值必须在定义时绑定。 如果创建初始值的计算成本很高，或者在定义时无法访问该值， 最好将原子的初始化推迟到其在存储中首次使用时。

const imageDataAtom = atom(initializeExpensiveImage()) // 1) 必须在此处计算

function Home() {
  ...
}

function ImageEditor() {
  // 2) 仅在此路由中使用
  const [imageData, setImageData] = useAtom(imageDataAtom);
  ...
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/edit" component={ImageEditor} />
    </Router>
  )
}

atomWithLazy

参考：https://github.com/pmndrs/jotai/pull/2465

我们可以使用 atomWithLazy 创建一个原始原子，其初始值将在在存储中首次使用时计算。 初始化后，它将像常规原始原子一样运行（可以写入）。

使用方法

import { atomWithLazy } from 'jotai/utils'

// 传递初始化函数
const imageDataAtom = atomWithLazy(initializeExpensiveImage)

function Home() {
  ...
}

function ImageEditor() {
  // 只有当用户访问 `/edit` 时才会初始化。
  const [imageData, setImageData] = useAtom(imageDataAtom);
  ...
}

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/edit" component={ImageEditor} />
    </Router>
  )
}

使用多个存储

由于每个存储都是其独立的宇宙，初始值将在每个存储中恰好重新创建一次（除非使用像 jotai-scope 这样的东西，它将存储分裂成更小的宇宙）。

type RGB = [number, number, number];

function randomRGB(): RGB {
  ...
}

const lift = (value: number) => ([r, g, b]: RGB) => {
  return [r + value, g + value, b + value]
}

const colorAtom = lazyAtom(randomRGB)

let store = createStore()

console.log(store.get(colorAtom)) // [0, 36, 128]
store.set(colorAtom, lift(8))
console.log(store.get(colorAtom)) // [8, 44, 136]

// 重新创建存储，有时在注销或以某种方式重置应用程序时完成
store = createStore()

console.log(store.get(colorAtom)) // [255, 12, 46] -- 一个新的随机颜色