jotail - API - 简书

Jotai 是一个简单而灵活的状态管理库，提供了一些常用的 API 来管理状态。以下是 Jotai 中常用的 API 及其用法说明：

1. atom

atom 是 Jotai 中的基本状态单位，表示一个独立的状态。

import { atom } from 'jotai';

// 创建一个原子
const countAtom = atom(0); // 初始值为 0

2. useAtom

useAtom 是一个 React Hook，用于在组件中使用原子。

import { useAtom } from 'jotai';

const MyComponent = () => {
  const [value, setValue] = useAtom(countAtom);

  return (
    <div>
      <p>当前值: {value}</p>
      <button onClick={() => setValue(value + 1)}>增加</button>
    </div>
  );
};

3. useSetAtom

useSetAtom 是一个 Hook，仅返回原子的更新函数。

import { useSetAtom } from 'jotai';

const MyComponent = () => {
  const setCount = useSetAtom(countAtom);

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>增加</button>
  );
};

4. useAtomValue

useAtomValue 是一个 Hook，仅返回原子的值，而不返回更新函数。

import { useAtomValue } from 'jotai';

const MyComponent = () => {
  const count = useAtomValue(countAtom);

  return <p>当前值: {count}</p>;
};

5. 组合原子

您可以组合多个原子来创建新的原子。例如，创建一个计算值的原子：

const doubleCountAtom = atom((get) => get(countAtom) * 2);

使用组合原子：

const MyComponent = () => {
  const [doubleCount] = useAtom(doubleCountAtom);

  return <p>双倍计数: {doubleCount}</p>;
};

6. 读写原子

您可以创建一个原子，它的值依赖于其他原子的值，或具有异步行为：

const fetchDataAtom = atom(
  null,
  async (get, set) => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set(dataAtom, data);
  }
);

7. Provider

在应用程序的根组件中使用 Provider 来提供上下文，虽然 Jotai 默认使用全局状态，但在某些情况下，您可能需要使用 Provider。

import { Provider } from 'jotai';

const App = () => (
  <Provider>
    <MyComponent />
  </Provider>
);

8. 其他钩子

useAtomCallback: 允许您创建一个回调，该回调可以访问多个原子。

import { useAtomCallback } from 'jotai';

const MyComponent = () => {
  const callback = useAtomCallback((get, set) => {
    const value = get(countAtom);
    set(countAtom, value + 1);
  });

  return <button onClick={callback}>增加</button>;
};

总结

以上是 Jotai 常用的 API 及其用法。Jotai 的设计旨在简单易用，允许您灵活地管理状态。您可以根据需要使用这些 API 来构建复杂的状态管理逻辑。如果您还有其他问题或需要更详细的示例，请随时询问！

jotail - API