[[352149]]

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

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

State 和 Context 的問(wèn)題

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

最常規(guī)則做法是將一個(gè) state 通過(guò)父組件分發(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ì)重新渲染。

為了避免全量渲染的問(wèn)題，我們可以把每個(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ù)流管理的問(wèn)題，采用分散管理原子狀態(tài)的設(shè)計(jì)模式。

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

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

用 Redux 或 Mobx 不可以嗎？

[[352154]]

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

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

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

基礎(chǔ)使用

初始化

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

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ì)用新的值來(lái)重新渲染。

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

例如下面的例子，如果用戶名存儲(chǔ)在我們需要查詢的某個(gè)數(shù)據(jù)庫(kù)中，那么我們要做的就是返回一個(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 來(lái)進(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，使用起來(lái)也感覺有點(diǎn)像 observable + computed 的模式，但是其 API 以及核心思想設(shè)計(jì)的又沒有  Mobx 一樣簡(jiǎn)潔易懂，反而有點(diǎn)復(fù)雜，對(duì)于新手上手起來(lái)會(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é)的。