Recoil 狀態管理方案的淺入淺出

本文作者：江水

背景: Recoil 是 Facebook 推出的一款專門針對React應用的狀態管理庫，在一定程度上代表了目前的一種發展趨勢，在使用時覺得一些理念很先進，能極大地滿足作為一個前端開發者的資料需求，本文對 Recoil 的這些特性做一個梳理。

根據官網的介紹，Recoil 的資料定義了一個有向圖 (directed graph)，狀態的變更是通過改變圖的根節點 (atom)，再通過純函式 (selector) 流向 React 元件。

同時 Recoil 的狀態定義是增量和分散式的，增量意味著我們可以在用的時候再定義新的狀態，而不必將所有狀態提前定義好再消費。分散式意味著狀態的定義可以放在任何位置，不必統一註冊到一個檔案中。這樣的好處是一方面可以簡化狀態的定義過程，另一方面也可以很好地應用在 code-splitting 場景。

在一個應用中開啟 Recoil 非常簡單，只需要包裹一個 RecoilRoot 即可。

```js import { RecoilRoot } from 'recoil';

ReactDOM.render( , root); ```

狀態定義，原子和選擇器

Recoil 允許使用 atom 和 selector 兩個函式定義基礎和推導狀態。

atom 基本用法，這裡定義了相關的原子屬性，需要使用唯一 key 來描述這個 atom 。 Recoil 中不允許重複的 key 出現，包括後面提到的 selector 。

```js const firstNameAtom = atom({ key: 'first name atom', default: '' });

const lastNameAtom = atom({ key: 'last name atom', default: '' }); ```

使用時通過 useRecoilState 這個 hooks 獲取狀態，可以看到它和 useState 很像，所以可以很輕鬆地將傳統的React狀態遷移到 Recoil 中。

```diff function UserProfile() { - const [firstName, setFirstName] = useState(''); + const [firstName, setFirstName] = useRecoilState(firstNameAtom);

return (

很多時候我們只想獲取資料而不想修改，或者反之，此時可以用語法糖 useRecoilValue 和 useSetRecoilState

```js function UserProfile() { const firstName = useRecoilValue(firstNameAtom);

return (

Recoil 會根據哪裡用到了這些狀態自動建立一種依賴關係，當發生變更時 Recoil 只會通知對應的元件進行更新。

selector 的用法和 atom 很像，構造一個 selector 至少需要一個唯一的 key 和 get 函式。

js const nameSelector({ key: 'my name selector', get: ({ get }) => { return get(firstNameAtom) + ' ' + get(lastNameAtom); } });

在 selector 中可以讀寫任意 atom / selector ，沒有任何限制。只有 get 方法的 selector 是隻讀的，如果需要可寫，也支援傳入 set 方法。

js const nameSelector({ key: 'my name selector', get: ({ get }) => { return get(firstNameAtom) + ' ' + get(lastNameAtom); }, set: ({ get, set }, value) => { const names = value.split(' '); set(firstNameAtom, names?.[0]); set(lastNameAtom, names?.[1]); } });

值得一提的是，selector支援從網路非同步獲取資料，這裡才是有趣的開始，也是和其他狀態管理的最大的不同，Recoil的狀態不僅是純狀態，也可以是來自網路的狀態。

js const userSelector = selector({ name: 'user selector', get: () => { return fetch('/api/user'); } });

使用 selector 時和 atom 一樣可以通過 useRecoilState, useRecoilValue, useSetRecoilState 這幾個 hook。

```js function App() { const user = useRecoilValue(userSelector);

...

} ```

這樣的特性使得我們的程式碼很容易重構，假如一開始一個屬性是一個 atom, 後面希望變成一個計算屬性，此時可以很輕鬆地替換這部分邏輯，而無需修改業務層程式碼。

Recoil 還可以更強大，用下面一張圖可以大致概括下，其完全可以當成一個統一的資料抽象層，將後端資料通過 http, ws, GraphQL 等技術對映到前端元件中。

atomFamily selectorFamily 批量建立狀態的解決方案

在一些場景中會有需要批量建立狀態的情況，我們會例項化多個相同的元件，每個元件都需要對應一個自己獨立的狀態元素，此時就可以使用 xxxFamily api。

```js const nodeAtom = atomFamily({ key: 'node atom', default: {} });

function Node({ nodeId }) { const [node, setNode] = useRecoilState(nodeAtom(nodeId)); } ```

可以看到，atomFamily 返回的是一個函式，而不是一個 RecoilState 物件。傳入不同的 nodeId 會檢查是否之前已存在，如果存在則複用之前的，不存在則建立並使用預設值初始化。

同理，對於 selectorFamily 。

``js const userSelector = selectorFamily({ key: 'user selector family', get: (userId) => () => { return fetch(/api/user/${userId}`); } });

function UserDetail({ userId }) { const user = useRecoilValue(userSelector(userId)); } ```

由於批量建立可能會導致記憶體洩漏，所以 Recoil 也提供了快取策略管理，分別為 lru, keep-all, most-recent，可以根據實際需要選取。

Suspense 與 Hooks

上文提到每個 atom, selector 背後可以是本地資料，也可以是網路狀態（對，沒錯， atom 也可以是個非同步資料，常用的如 atom 初始化是個非同步，後續變成同步資料），在元件消費時無需關心背後的實際來源，使用遠端資料就像使用本地資料一樣輕鬆。

來看一個普通的獲取資料並展示元件的例子。

```js function getUser() { return fetch('/api/user'); }

function LocalUserStatus() { const [loading, setLoading] = useState(false); const [user, setUser] = useState(null);

useEffect(() => { setLoading(true); getUser().then((user) => { setUser(user); setLoading(false); }) }, []);

if (loading) { return null; }

return (

對於這種開發習慣 (往往被稱為 Fetch-on-Render）：我們需要一個 useEffect 來獲取資料，再需要設定一些 loading, error 狀態處理邊界狀態，如果這個資料不是一個放在全域性且處在頂層的資料，而是散落在子元件中消費，則每一個使用的地方都要執行類似的邏輯。

下面看下 Recoil 的寫法

```js const localUserAtom = atom({ key: 'local user status', default: selector({ // <-------- 預設值來自 selector key: 'user selector', get: () => { return fetch('/api/user'); } })
});

function LocalUserStatus() { const localUser = useRecoilValue(localUserAtom);

return (
  <div>
    { localUser.name }
  </div>
)

} ```

這裡在元件層是不關心資料從哪來的， Recoil 會自動按需請求資料。

相比之下，後者的程式碼就簡潔許多(Render-as-You-Fetch)，而且背後並沒有發明新的概念，用到的都是 React 原生的特性，這個特性就是 Suspense。

如果使用了一個非同步的 atom 或 selector ，則外層需要一個 Suspense 處理網路未返回時的 loading 狀態。也可以套一層 ReactErrorBoundary 處理網路異常的情況。

```js // UserProfile 中使用了一個需要從網路中載入的資料 function LocalUserStatus() { const user = useRecoilValue(localUserAtom);

... }

function App() { return (

    <Suspense fallback={<Loading />}>
        <LocalUserStatus />
    </Suspense>

    <div>底部</div>
</div>