atom(options)

一个 atom 代表 Recoil 中的状态。atom() 函数返回一个可写的 RecoilState 对象。

function atom<T>({
  key: string,

  default?: T | Promise<T> | Loadable<T> | WrappedValue<T> | RecoilValue<T>,

  effects?: $ReadOnlyArray<AtomEffect<T>>,

  dangerouslyAllowMutability?: boolean,
}): RecoilState<T>

key - 用于在内部标识原子的唯一字符串。此字符串应该在整个应用程序中相对于其他原子和选择器是唯一的。
default - 原子的初始值。它也可以是一个 Promise，Loadable，包装的值，或另一个代表默认值的相同类型的原子或选择器。
- 如果选择器用作默认值，则原子将在默认选择器更新时动态更新。一旦原子被设置，它将保留该值，除非原子被重置。
- 如果未提供 default（与可能包含 null 或 undefined 的值相反），则原子将处于“挂起”状态并触发 Suspense，直到它被设置。
- 如果你想将默认原子值直接设置为 Promise，Loadable，原子，选择器或函数而不解包它，那么你可以用 atom.value(...) 包装它。
effects - 原子的可选原子效果数组。
dangerouslyAllowMutability - 在某些情况下，可能需要允许对存储在原子中的不代表状态更改的对象进行变异。使用此选项在开发模式下覆盖冻结对象。

Recoil 管理原子状态更改以知道何时通知订阅该原子的组件重新渲染，因此你应该使用下面列出的钩子来更改原子状态。如果存储在原子中的对象被直接修改，它可能会绕过此操作并导致状态更改，而不会正确通知订阅组件。为了帮助检测这样的错误，Recoil 在开发模式下会冻结存储在原子中的对象。

大多数情况下，你将使用以下钩子与原子交互

useRecoilState(): 当你打算对原子进行读写时，使用此钩子。此钩子将组件订阅到原子。
useRecoilValue(): 当你打算只读取原子时，使用此钩子。此钩子将组件订阅到原子。
useSetRecoilState(): 当你打算只写入原子时，使用此钩子。
useResetRecoilState(): 使用此钩子将原子重置为其默认值。

对于你可能需要在不订阅组件的情况下读取原子的值的罕见情况，请参阅 useRecoilCallback().

你可以用静态值或 Promise 或代表相同类型值的 RecoilValue 初始化原子。因为 Promise 可能正在挂起或默认选择器可能是异步的，这意味着原子值也可能正在挂起或在读取时抛出错误。请注意，目前你不能在设置原子时分配 Promise。请使用选择器用于异步函数。

原子不能直接用于存储 Promise 或 RecoilValue，但它们可以包装在对象中。请注意，Promise 可能可变。原子可以设置为 function，只要它是纯净的，但要做到这一点，你可能需要使用设置器的更新程序形式。（例如 set(myAtom, () => myFunc);）。

示例

import {atom, useRecoilState} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}

原子族

atomFamily() 可用于存储相关状态的集合或对你的原子状态进行范围限定。

示例​

原子族​

示例

原子族