atom(選項)

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 - 用於在內部識別 atom 的唯一字串。此字串應在整個應用程式中各個 atom 和 selector 中保持唯一性。
default - atom 的初始值。它也可以是 Promise、Loadable、封裝值，或代表預設值的相同類型的 atom 或 selector。
- 如果使用 selector 作為預設，atom 會在預設 selector 更新時動態更新。一旦設定 atom，它就會保留該值，除非 atom 已重設。
- 如果未提供 default，不同於可能包含 null 或 undefined 的值，atom 將從「待處理」狀態開始，並在設定前觸發 Suspense。
- 如果你想直接將預設 atom 值設定為 Promise、Loadable、atom、selector 或函式而不會將其解封，可以使用 atom.value(...) 予以封裝。
effects - atom 的 Atom 效果選擇陣列。
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() 可用於儲存相關狀態集合或設定原子狀態的範圍。

範例​

原子家族​

範例

原子家族