理解 React 輕量狀態管理元件 Unstated
在React寫應用的時候，難免遇到跨元件通訊的問題。現在已經有很多的解決方案。
- React本身的Context
- Redux結合React-redux
- Mobx結合mobx-react
React 的新的Context api本質上並不是React或者Mbox這種狀態管理工具的替代品，充其量只是對React
自身狀態管理短板的補充。而Redux和Mbox這兩個庫本身並不是為React設計的，對於一些小型的React應用
比較重。
基本概念
Unstated是基於context API。也就是使用React.createContext()建立一個StateContext來傳遞狀態，
- Container：狀態管理類，內部使用state儲存狀態，通過setState實現狀態的更新，api設計與React的元件基本一致。
- Provider：返回Provider，用來包裹頂層元件，嚮應用中注入狀態管理例項，可做資料的初始化。
- Subscribe：本質上是Consumer，獲取狀態管理例項，在Container例項更新狀態的時候強制更新檢視。
簡單的例子
我們拿最通用的計數器的例子來看unstated如何使用，先明確一下結構：Parent作為父元件包含兩個子元件：Child1和Child2。
Child1展示數字，Child2運算元字的加減。然後，Parent元件的外層會包裹一個根元件。
維護狀態
首先，共享狀態需要有個狀態管理的地方，與Redux的Reducer不同的是，Unstated是通過一個繼承自Container例項：
import { Container } from 'unstated';
class CounterContainer extends Container {
constructor(initCount) {
super(...arguments);
this.state = {count: initCount || 0};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
decrement = () => {
this.setState({ count: this.state.count - 1 });
}
}
export default CounterContainer
看上去是不是很熟悉？像一個React元件類。CounterContainer繼承自Unstated暴露出來的 Container 類，利用state儲存資料，setState維護狀態，
並且setState與React的setState用法一致，可傳入函式。返回的是一個promise。
共享狀態
來看一下要顯示數字的Child1元件，利用 Subscribe 與CounterContainer建立聯絡。
import React from 'react'
import { Subscribe } from 'unstated'
import CounterContainer from './store/Counter'
class Child1 extends React.Component {
render() {
return <Subscribe to={[CounterContainer]}>
{
counter => {
return <div>{counter.state.count}</div>
}
}
</Subscribe>
}
}
export default Child1
再來看一下要控制數字加減的Child2元件：
import React from 'react'
import { Button } from 'antd'
import { Subscribe } from 'unstated'
import CounterContainer from './store/Counter'
class Child2 extends React.Component {
render() {
return <Subscribe to={[CounterContainer]}>
{
counter => {
return <div>
<button onClick={counter.increment}>增加</button>
<button onClick={counter.decrement}>減少</button>
</div>
}
}
</Subscribe>
}
}
export default Child2
Subscribe內部返回的是StateContext.Consumer，通過to這個prop關聯到CounterContainer例項，
使用renderProps模式渲染檢視，Subscribe之內呼叫的函式的引數就是訂閱的那個狀態管理例項。
Child1與 Child2 通過Subscribe訂閱共同的狀態管理例項 CounterContainer ，所以Child2可以呼叫
CounterContainer之內的increment和decrement方法來更新狀態,而Child1會根據更新來顯示資料。
看一下父元件Parent
import React from 'react'
import { Provider } from 'unstated'
import Child1 from './Child1'
import Child2 from './Child2'
import CounterContainer from './store/Counter'
const counter = new CounterContainer(123)
class Parent extends React.Component {
render() {
return <Provider inject={[counter]}>
父元件
<Child1/>
<Child2/>
</Provider>
}
}
export default Parent
Provider返回的是StateContext.Provider，Parent通過 Provider 向元件的上下文中注入狀態管理例項。
這裡，可以不注入例項。不注入的話，Subscribe內部就不能拿到注入的例項去初始化資料，也就是給狀態一個預設值，比如上邊我給的是123。
也可以注入多個例項：
<Provider inject={[count1, count2]}>
{/*Components*}
</Provide>
那麼，在Subscribe的時候可以拿到多個例項。
<Subscribe to={[CounterContainer1, CounterContainer2]}>
{count1, count2) => {}
</Subscribe>
分析原理
弄明白原理之前需要先明白Unstated提供的三個API之間的關係。我根據自己的理解，畫了一張圖：
來梳理一下整個流程：
- 建立狀態管理類繼承自Container
- 生成上下文，new一個狀態管理的例項，給出預設值，注入Provider
- Subscribe訂閱狀態管理類。內部通過_createInstances方法來初始化狀態管理例項並訂閱該例項，具體過程如下：
- 從上下文中獲取狀態管理例項，如果獲取到了，那它直接去初始化資料，如果沒有獲取到
那麼就用to中傳入的狀態管理類來初始化例項。
- 將自身的更新檢視的函式onUpdate通過訂閱到狀態管理例項，來實現例項內部setState的時候，呼叫onUpdate更新檢視。
- _createInstances方法返回建立的狀態管理例項，作為引數傳遞給renderProps呼叫的函式，函式拿到例項，操作或顯示資料。
Container
用來實現一個狀態管理類。可以理解為redux中action和reducer的結合。概念相似，但實現不同。來看一下Container的原始碼
export class Container {
constructor() {
CONTAINER_DEBUG_CALLBACKS.forEach(cb => cb(this));
this.state = null;
this.listeners = [];
}
setState(updater, callback) {
return Promise.resolve().then(() => {
let nextState = null;
if (typeof updater === 'function') {
nextState = updater(this.state);
} else {
nextState = updater;
}
if (nextState === null) {
callback && callback();
}
// 返回一個新的state
this.state = Object.assign({}, this.state, nextState);
// 執行listener，也就是Subscribe的onUpdate函式，用來強制重新整理檢視
const promises = this.listeners.map(listener => listener());
return Promise.all(promises).then(() => {
if (callback) {
return callback();
}
});
});
}
subscribe(fn) {
this.listeners.push(fn);
}
unsubscribe(fn) {
this.listeners = this.listeners.filter(f => f !== fn);
}
}
Container包含了state、listeners，以及setState、subscribe、unsubscribe這三個方法。
- state來存放資料，listeners是一個數組，存放更新檢視的函式。
- subscribe會將更新的函式(Subscribe元件內的onUpdate)放入linsteners。
- setState和react的setState相似。執行時，會根據變動返回一個新的state，
同時迴圈listeners呼叫其中的更新函式。達到更新頁面的效果。
- unsubscribe用來取消訂閱。
Provider
Provider本質上返回的是StateContext.Provider。
export function Provider(ProviderProps) {
return (
<StateContext.Consumer>
{parentMap => {
let childMap = new Map(parentMap);
if (props.inject) {
props.inject.forEach(instance => {
childMap.set(instance.constructor, instance);
});
}
return (
<StateContext.Provider value={childMap}>
{props.children}
</StateContext.Provider>
);
}}
</StateContext.Consumer>
);
}
它自己接收一個inject屬性，經過處理後，將它作為context的值傳入到上下文環境中。
可以看出，傳入的值為一個map，使用Container類作為鍵，Container類的例項作為值。
Subscribe會接收這個map，優先使用它來例項化Container類， 初始化資料 。
可能有人注意到了Provider不是直接返回的StateContext.Provider，而是套了一層
StateContext.Consumer。這樣做的目的是Provider之內還可以巢狀Provider。
內層Provider的value可以繼承自外層。
Subscribe
簡單來說就是連線元件與狀態管理類的一座橋樑，可以想象成react-redux中connect的作用
class Subscribe extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.instances = [];
this.unmounted = false;
}
componentWillUnmount() {
this.unmounted = true;
this.unsubscribe();
}
unsubscribe() {
this.instances.forEach((container) => {
container.unsubscribe(this.onUpdate);
});
}
onUpdate = () => new Promise((resolve) => {
if (!this.unmounted) {
this.setState(DUMMY_STATE, resolve);
} else {
resolve();
}
})
_createInstances(map, containers) {
this.unsubscribe();
if (map === null) {
throw new Error('You must wrap your <Subscribe> components with a <Provider>');
}
const safeMap = map;
const instances = containers.map((ContainerItem) => {
let instance;
if (
typeof ContainerItem === 'object' &&
ContainerItem instanceof Container
) {
instance = ContainerItem;
} else {
instance = safeMap.get(ContainerItem);
if (!instance) {
instance = new ContainerItem();
safeMap.set(ContainerItem, instance);
}
}
instance.unsubscribe(this.onUpdate);
instance.subscribe(this.onUpdate);
return instance;
});
this.instances = instances;
return instances;
}
render() {
return (
<StateContext.Consumer>
{
map => this.props.children.apply(
null,
this._createInstances(map, this.props.to),
)
}
</StateContext.Consumer>
);
}
}
這裡比較重要的是_createInstances與onUpdate兩個方法。StateContext.Consumer接收Provider傳遞過來的map，
與props接收的to一併傳給_createInstances。
onUpdate:沒有做什麼其他事情，只是利用setState更新檢視，返回一個promise。它存在的意義是在訂閱的時候，
作為引數傳入Container類的subscribe，擴充Container類的listeners陣列，隨後在Container類setState改變狀態以後，
迴圈listeners的每一項就是這個onUpdate方法，它執行，就會更新檢視。
_createInstances: map為provider中inject的狀態管理例項資料。如果inject了，那麼就用map來例項化資料，
否則用this.props.to的狀態管理類來例項化。之後呼叫instance.subscribe方法（也就是Container中的subscribe），
傳入自身的onUpdate，實現訂閱。它存在的意義是例項化Container類並將自身的onUpdate訂閱到Container類例項，
最終返回這個Container類的例項，作為this.props.children的引數並進行呼叫，所以在元件內部可以進行類似這樣的操作：
<Subscribe to={[CounterContainer]}>
{
counter => {
return <div>
<Button onClick={counter.increment}>增加</Button>
<Button onClick={counter.decrement}>減少</Button>
</div>
}
}
</Subscribe>
總結
Unstated上手很容易，理解原始碼也不難。重點在於理解發布（Container類），Subscribe元件實現訂閱的思路。
其API的設計貼合React的設計理念。也就是想要改變UI必須setState。另外可以不用像Redux一樣寫很多樣板程式碼。
理解原始碼的過程中受到了下面兩篇文章的啟發，衷心感謝：
[[原始碼閱讀]純粹極簡的react狀態管理元件unstated]( https://segmentfault.com/a/11...