Facebook 新一代 React 狀態(tài)管理庫(kù) Recoil
在 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 的問題
假設(shè)我們有下面一個(gè)場(chǎng)景：有 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)共享上非常苦難，所以我們?cè)陂_發(fā)時(shí)一般借助一些其他的庫(kù)如 Redux、Mobx 來幫助我們管理狀態(tài)。這些庫(kù)目前正被廣泛使用，我們也并沒有遇到什么大問題，那么 Facebook 為什么還要推出一款新的狀態(tài)管理框架呢？
使用 Redux、Mobx 當(dāng)然可以，并沒有什么問題，主要原因是它們本身并不是 React 庫(kù)，我們是借助這些庫(kù)的能力來實(shí)現(xiàn)狀態(tài)管理。像 Redux 它本身雖然提供了強(qiáng)大的狀態(tài)管理能力，但是使用的成本非常高，你還需要編寫大量冗長(zhǎng)的代碼，另外像異步處理或緩存計(jì)算也不是這些庫(kù)本身的能力，甚至需要借助其他的外部庫(kù)。
并且，它們并不能訪問 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?<>
???
???Name:?{name}
??;
}
//?useRecoilValue
const?SomeOtherComponentWithName?=?()?=>?{
??const?name?=?useRecoilValue(nameState);
??return?{name};
}
//?useSetRecoilState??
const?SomeOtherComponentThatSetsName?=?()?=>?{
??const?setName?=?useSetRecoilState(nameState);
??return??setName('Jon?Doe')}>Set?Name;
}
派生狀態(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ù)庫(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 來進(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 一樣簡(jiǎn)潔易懂，反而有點(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é)的。
