使用 atom

完成创建的 atom 在 React 组件中是通过useAtom Hook 来使用的。跟 React 中的useState Hook 一样，useAtom在调用以后也是通过列表返回两个元素。以下是useAtom在使用时的常见形式。

const [value, setValue] = useAtom(someAtom);

这个形式返回的内容及其用法跟 React 中的useState是一样的，所以不再赘述。

Caution

useAtom接受的参数是一个atom，但是需要注意的是，由于React中对于引用实例是否发生改变的判断机制，不要在这里使用useAtom(atom(value))的形式定义atom，这样会导致React中的无限渲染情况出现，因为组件每刷新一次，就会创建一个新的atom实例，然后继而又触发组件的重新渲染。

所以atom的创建要放置在组件外面。

如果需要在组件中定义 atom，那么可以使用以下示例中的形式。

const stableAtom = atom(1);
const Component = () => {
  const [derived] = useAtom(
    useMemo(() => atom((get) => get(statbleAtom) + 1), [])
  );
};

这种形式可以保证组件中创建的 atom 实例的稳定，所以是可以避免无限循环现象产生的。但是在实际项目中请不要滥用这种方法。

Tip

可能你选择使用这种方法来创建atom只是为了获取一个动态创建的atom，对于你的这个需求，请稍等等，后面的章节（Atom Family）会提供给你一个更好的按需创建atom的方法。

读写分离的 Hook

useAtom会同时返回 atom 的值和更新函数，这在关注点分离的设计中。我们往往需要的只是 atom 的值或者更新 atom 的方法。所以 Jotai 提供了另外两个 Hook 供使用，它们可以分别获取 atom 的值和获取更新 atom 的方法。

获取 atom 的值的 Hook 是useAtomValue，它可以订阅获取 atom 的值。它和useAtom一样是可以触发 atom 的onMount生命周期的。

获取更新 atom 值的 Hook 是useSetAtom，它获取到的是useAtom Hook 返回的第二个元素，也就是相当于const [_, setValue] = useAtom(valueAtom)的用法。