JotaiJotai

状態
Primitive and flexible state management for React

自定义 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 包装。