useAtom 是 Jotai 库中的一个核心 Hook

useAtom 是 Jotai 库中的一个核心 Hook，用于在 React 组件中管理和使用状态。Jotai 是一个轻量级的状态管理库，灵感来源于 Recoil，但更加简洁和直观。

基本用法

useAtom 用于创建和管理原子状态（atoms）。原子状态是 Jotai 中的基本状态单元，可以被多个组件共享和更新。

import { atom, useAtom } from 'jotai';

// 创建一个原子状态
const countAtom = atom(0);

function Counter() {
  // 使用 useAtom 读取和更新原子状态
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

特点

1. 简洁：Jotai 的 API 非常简洁，易于学习和使用。
2. 轻量：Jotai 的体积很小，对项目的影响较小。
3. 灵活：原子状态可以组合和派生，支持复杂的状态逻辑。
4. React 集成：与 React 的 Hooks API 完美集成，使用起来非常自然。

高级用法

除了基本的状态管理，Jotai 还支持派生状态、异步状态和原子组合等高级功能。

import { atom, useAtom } from 'jotai';

// 创建一个基础原子状态
const baseAtom = atom(0);

// 创建一个派生原子状态
const derivedAtom = atom(
  (get) => get(baseAtom) * 2,
  (get, set, newValue) => {
    set(baseAtom, newValue / 2);
  }
);

function DerivedCounter() {
  const [derivedValue, setDerivedValue] = useAtom(derivedAtom);

  return (
    <div>
      <p>Derived Value: {derivedValue}</p>
      <button onClick={() => setDerivedValue(derivedValue + 2)}>Increment</button>
    </div>
  );
}

通过 useAtom，Jotai 提供了一种简单而强大的方式来管理 React 应用中的状态。