自定义 useAtom hooks
此页面显示了创建不同功能函数的方法。 utils 可以节省您的编码时间,并且您可以保留基本原子以供其他用途。
utils
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));}
integrations
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
包装。