自定义工具 Hook
其实上一节中的splitAtom
和selectAtom
的使用都可以用自定义 Hook 来封装,这样在使用的时候就会变得更加简便。以下提供几个基于jotai/utils
库中的工具函数构建的自定义 Hook。
useSelectAtom
这是上一节中selectAtom
函数的快捷集成 Hook。
export function useSelectAtom(anAtom, selector) {
const selectorAtom = selectAtom(anAtom, selector);
return useAtomValue(selectorAtom);
}
需要注意的是,这个 Hook 中需要的selector
需要是一个稳定引用,建议在使用的时候在组件外部定义或者使用useCallback
定义。
useFreezeAtom
freezeAtom
用于创建一个 atom 的冻结版本,以防止内容的修改。这个 Hook 可以即时创建一个指定 atom 的冻结,并返回 atom 的访问和操作方法。
export function useFreezeAtom(anAtom) {
return useAtom(freezeAtom(anAtom));
}
useSplitAtom
这个 Hook 依旧还是上一节中的splitAtom
函数的快捷集成 Hook。
export function useSplitAtom(anAtom) {
return useAtom(splitAtom(anAtom));
}