自定义useAtom hooks

这个页面展示了创建不同实用函数的方法。实用函数可以节省你的编码时间，并且你可以为其他用途保留你的基础原子。

实用工具

useSelectAtom

import { useAtomValue } from 'jotai'
import { selectAtom } from 'jotai/utils'

/* 如果在这里创建了一个原子，请使用 `useMemo(() => atom(initValue), [initValue])` 替代。 */
export function useSelectAtom(anAtom, keyFn) {
  return useAtomValue(selectAtom(anAtom, keyFn))
}

// 如何使用它
useSelectAtom(
  useMemo(() => atom(initValue), [initValue]),
  useCallback((state) => state.prop, []),
)

请注意，在这种情况下，keyFn 必须是稳定的，要么在渲染外部定义，要么用 useCallback 包装。

useFreezeAtom

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

export function useFreezeAtom(anAtom) {
  return useAtom(freezeAtom(anAtom))
}

useSplitAtom

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

export function useSplitAtom(anAtom) {
  return useAtom(splitAtom(anAtom))
}

扩展

useFocusAtom

import { useAtom } from 'jotai'
import { focusAtom } from 'jotai-optics'

/* 如果在这里创建了一个原子，请使用 `useMemo(() => atom(initValue), [initValue])` 替代。 */
export function useFocusAtom(anAtom, keyFn) {
    return useAtom(focusAtom(anAtom, keyFn))
}

// 如何使用它
useFocusAtom(anAtom) {
    useMemo(() => atom(initValue), [initValue]),
    useCallback((optic) => optic.prop('key'), [])
}

CodeSandbox

请注意，在这种情况下，keyFn 必须是稳定的，要么在渲染外部定义，要么用 useCallback 包装。