Facebook 新一代 React 狀態(tài)管理庫 Recoil

在 React Europe 2020 Conference 上， Facebook 軟件工程師 Dave McCabe 介紹了一個(gè)新的狀態(tài)管理庫 Recoil。

Recoil 現(xiàn)在還處于實(shí)驗(yàn)階段，現(xiàn)在已經(jīng)在 Facebook 一些內(nèi)部產(chǎn)品中用于生產(chǎn)環(huán)境。畢竟是官方推出的狀態(tài)管理框架，之前沒時(shí)間仔細(xì)研究，借著國慶期間看了看，給大家分享一下。

State 和 Context 的問題

假設(shè)我們有下面一個(gè)場景：有 List 和 Canvas 兩個(gè)組件，List 中一個(gè)節(jié)點(diǎn)更新后，Canvas 中的節(jié)點(diǎn)也對(duì)應(yīng)更新。

最常規(guī)則做法是將一個(gè) state 通過父組件分發(fā)給 List 和 Canvas 兩個(gè)組件，顯然這樣的話每次 state 改變后 所有節(jié)點(diǎn)都會(huì)全量更新。

當(dāng)然，我們還可以使用 Context API，我們將節(jié)點(diǎn)的狀態(tài)存在一個(gè) Context 內(nèi)，只要 Provider 中的 props 發(fā)生改變， Provider 的所有后代使用者都會(huì)重新渲染。

為了避免全量渲染的問題，我們可以把每個(gè)子節(jié)點(diǎn)存儲(chǔ)在單獨(dú)的 Context 中，這樣每多一個(gè)節(jié)點(diǎn)就要增加一層 Provider。

但是，如果子節(jié)點(diǎn)是動(dòng)態(tài)增加的呢？我們還需要去動(dòng)態(tài)增加 Provider ，這會(huì)讓整個(gè)樹再次重新渲染，顯然也是不符合預(yù)期的。

引入 Recoil

Recoil 本身就是為了解決 React 全局?jǐn)?shù)據(jù)流管理的問題，采用分散管理原子狀態(tài)的設(shè)計(jì)模式。

Recoil 提出了一個(gè)新的狀態(tài)管理單位 Atom，它是可更新和可訂閱的，當(dāng)一個(gè) Atom 被更新時(shí)，每個(gè)被訂閱的組件都會(huì)用新的值來重新渲染。如果從多個(gè)組件中使用同一個(gè) Atom ，所有這些組件都會(huì)共享它們的狀態(tài)。

你可以把 Atom 想象為為一組 state 的集合，改變一個(gè) Atom 只會(huì)渲染特定的子組件，并不會(huì)讓整個(gè)父組件重新渲染。

用 Redux 或 Mobx 不可以嗎？

因?yàn)?React 本身提供的 state 狀態(tài)在跨組件狀態(tài)共享上非常苦難，所以我們在開發(fā)時(shí)一般借助一些其他的庫如 Redux、Mobx 來幫助我們管理狀態(tài)。這些庫目前正被廣泛使用，我們也并沒有遇到什么大問題，那么 Facebook 為什么還要推出一款新的狀態(tài)管理框架呢？

使用 Redux、Mobx 當(dāng)然可以，并沒有什么問題，主要原因是它們本身并不是 React 庫，我們是借助這些庫的能力來實(shí)現(xiàn)狀態(tài)管理。像 Redux 它本身雖然提供了強(qiáng)大的狀態(tài)管理能力，但是使用的成本非常高，你還需要編寫大量冗長的代碼，另外像異步處理或緩存計(jì)算也不是這些庫本身的能力，甚至需要借助其他的外部庫。

并且，它們并不能訪問 React 內(nèi)部的調(diào)度程序，而 Recoil 在后臺(tái)使用 React 本身的狀態(tài)，在未來還能提供并發(fā)模式這樣的能力。

基礎(chǔ)使用

初始化

使用 recoil 狀態(tài)的組件需要使用 RecoilRoot 包裹起來：

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
  useSetRecoilState
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

定義狀態(tài)

上面我們已經(jīng)提到了 Atom 的概念， Atom 是一種新的狀態(tài)，但是和傳統(tǒng)的 state 不同，它可以被任何組件訂閱，當(dāng)一個(gè) Atom 被更新時(shí)，每個(gè)被訂閱的組件都會(huì)用新的值來重新渲染。

首先我們來定義一個(gè) Atom：

export const nameState = atom({
  key: 'nameState',
  default: 'ConardLi'
});

這種方式意味著你不需要像 Redux 那樣集中定義狀態(tài)，可以像 Mobx 一樣將數(shù)據(jù)分散定義在任何地方。

要?jiǎng)?chuàng)建一個(gè) Atom ，必須要提供一個(gè) key ，其必須在 RecoilRoot 作用域中是唯一的，并且要提供一個(gè)默認(rèn)值，默認(rèn)值可以是一個(gè)靜態(tài)值、函數(shù)甚至可以是一個(gè)異步函數(shù)。

訂閱和更新狀態(tài)

Recoil 采用 Hooks 方式訂閱和更新狀態(tài)，常用的是下面三個(gè) API：

• useRecoilState：類似 useState 的一個(gè) Hook，可以取到 atom 的值以及 setter 函
• useSetRecoilState：只獲取 setter 函數(shù)，如果只使用了這個(gè)函數(shù)，狀態(tài)變化不會(huì)導(dǎo)致組件重新渲染
• useRecoilValue：只獲取狀態(tài)

import { nameState } from './store'
// useRecoilState
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const onChange = (event) => {
   setName(event.target.value);
  };
  return <>
   <input type="text" value={name} onChange={onChange} />
   <div>Name: {name}</div>
  </>;
}

// useRecoilValue
const SomeOtherComponentWithName = () => {
  const name = useRecoilValue(nameState);
  return <div>{name}</div>;
}

// useSetRecoilState  
const SomeOtherComponentThatSetsName = () => {
  const setName = useSetRecoilState(nameState);
  return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
}

派生狀態(tài)

selector 表示一段派生狀態(tài)，它使我們能夠建立依賴于其他 atom 的狀態(tài)。它有一個(gè)強(qiáng)制性的 get 函數(shù)，其作用與 redux 的 reselect 或 MobX 的 @computed 類似。

const lengthState = selector({
  key: 'lengthState', 
  get: ({get}) => {
    const text = get(nameState);
    return text.length;
  },
});

function NameLength() {
  const length = useRecoilValue(charLengthState);
  return <>Name Length: {length}</>;
}

selector 是一個(gè)純函數(shù)：對(duì)于給定的一組輸入，它們應(yīng)始終產(chǎn)生相同的結(jié)果（至少在應(yīng)用程序的生命周期內(nèi)）。這一點(diǎn)很重要，因?yàn)檫x擇器可能會(huì)執(zhí)行一次或多次，可能會(huì)重新啟動(dòng)并可能會(huì)被緩存。

異步狀態(tài)

Recoil 提供了通過數(shù)據(jù)流圖將狀態(tài)和派生狀態(tài)映射到 React 組件的方法。真正強(qiáng)大的功能是圖中的函數(shù)也可以是異步的。這使得我們可以在異步 React 組件渲染函數(shù)中輕松使用異步函數(shù)。使用 Recoil ，你可以在選擇器的數(shù)據(jù)流圖中無縫地混合同步和異步功能。只需從選擇器 get 回調(diào)中返回 Promise ，而不是返回值本身。

例如下面的例子，如果用戶名存儲(chǔ)在我們需要查詢的某個(gè)數(shù)據(jù)庫中，那么我們要做的就是返回一個(gè) Promise 或使用一個(gè) async 函數(shù)。如果 userID 發(fā)生更改，就會(huì)自動(dòng)重新執(zhí)行新查詢。結(jié)果會(huì)被緩存，所以查詢將僅對(duì)每個(gè)唯一輸入執(zhí)行一次（所以一定要保證 selector 純函數(shù)的特性，否則緩存的結(jié)果將會(huì)和最新的值不一致）。

const userNameQuery = selector({
  key: 'userName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(userNameQuery);
  return <div>{userName}</div>;
}

Recoil 推薦使用 Suspense，Suspense 將會(huì)捕獲所有異步狀態(tài)，另外配合 ErrorBoundary 來進(jìn)行錯(cuò)誤捕獲：

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <CurrentUserInfo />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}

總結(jié)

Recoil 推崇的是分散式的狀態(tài)管理，這個(gè)模式很類似于 Mobx，使用起來也感覺有點(diǎn)像 observable + computed 的模式，但是其 API 以及核心思想設(shè)計(jì)的又沒有  Mobx 一樣簡潔易懂，反而有點(diǎn)復(fù)雜，對(duì)于新手上手起來會(huì)有一定成本。

在使用方式上完全擁抱了函數(shù)式的 Hooks 使用方式，并沒有提供 Componnent 的使用方式，目前使用原生的 Hooks API 我們也能實(shí)現(xiàn)狀態(tài)管理，我們也可以使用 useMemo 創(chuàng)造出派生狀態(tài)，Recoil 的 useRecoilState 以及 selector 也比較像是對(duì) useContext、useMemo 的封裝。

但是畢竟是 Facebook 官方推出的狀態(tài)管理框架，其主打的是高性能以及可以利用 React 內(nèi)部的調(diào)度機(jī)制，包括其承諾即將會(huì)支持的并發(fā)模式，這一點(diǎn)還是非常值得期待的。

另外，其本身的分散管理原子狀態(tài)的模式、讀寫分離、按需渲染、派生緩存等思想還是非常值得一學(xué)的。