自定义工具 Hook

其实上一节中的splitAtomselectAtom的使用都可以用自定义 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));
}