理解 React 輕量狀態管理庫 Unstated

阿新 • • 發佈：2020-12-14

在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>

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

分析原理

弄明白原理之前需要先明白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可以繼承自外層。

簡單來說就是連線元件與狀態管理類的一座橋樑，可以想象成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

基本概念

簡單的例子

維護狀態

共享狀態

分析原理

Container

Provider

Subscribe

總結

理解 React 輕量狀態管理庫 Unstated

簡單體驗一個高效能，簡單，輕量的ORM庫- Dapper (無依賴其它庫，非常方便高效)

Vue VueX狀態管理庫(程式碼記錄)

.Net輕量狀態機Stateless

輕量資料庫管理工具之adminer

狀態管理庫vuex

狀態管理庫vuex與生命週期函式

vue基礎（2.狀態管理庫vuex）

vue框架（狀態管理庫，組合API）

vuex狀態管理庫

Golang 實現輕量、快速的基於 Reactor 模式的非阻塞 TCP 網路庫

在react中使用vue的狀態管理的方法示例

40行程式碼把Vue3的響應式整合進React做狀態管理

Crawlab Lite 正式釋出，更輕量的爬蟲管理平臺

Docker 下安裝Docker視覺化輕量管理工具 shipyard漢化版

React使用Hooks與Context替代Redux狀態管理

Vant輕量UI庫使用流程

LUA好用的輕量JSON庫

Vant Weapp輕量小程式 UI 元件庫匯入教程

如何理解Vue簡單狀態管理之store模式

理解 React 輕量狀態管理庫 Unstated

基本概念

簡單的例子

維護狀態

共享狀態

分析原理

Container

Provider

Subscribe

總結

相關推薦