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