[源碼閱讀]純粹極簡的react狀態(tài)管理組件unstated

FrancisSoung 發(fā)布于2019-08-23 13:56 / 1147人閱讀

摘要：此處繼承了上面的可以注入現(xiàn)成的狀態(tài)管理實(shí)例，添加到之中。返回值寫成的意義簡單一句話概括，這么寫可以避免改變導(dǎo)致子組件的重復(fù)渲染。就是創(chuàng)建狀態(tài)管理組件時(shí)默認(rèn)傳遞的監(jiān)聽函數(shù)，用的是的更新一個(gè)空對象。返回值寫成的意義。

簡介

unstated是一個(gè)極簡的狀態(tài)管理組件

看它的簡介：State so simple, it goes without saying

對比 對比redux：

更加靈活(相對的缺點(diǎn)是缺少規(guī)則，需要使用者的自覺)

redux的狀態(tài)是存放在一棵樹內(nèi)，采用嚴(yán)格的單向流

unstated的狀態(tài)是用戶自己定義，說白了就是object，可以放在一個(gè)組件的內(nèi)，也可以放在多個(gè)組件內(nèi)

針對React，一致的API

redux必須編寫reducer和action，通過dispatch(action)改變狀態(tài)，它不限框架

unstated改變狀態(tài)的API完全與React一致，使用this.setState，當(dāng)然和React的setState不同，
但是它的底層也是用到了setState去更新視圖

功能相對簡單

unstated沒有中間件功能，每次狀態(tài)改變(不管是否相等)，都會重新渲染(V2.1.1)

可以自定義listener，每次更新狀態(tài)時(shí)都會執(zhí)行。

對比React的自帶state：

天生將組件分割為Container(狀態(tài)管理)和Component(視圖管理)

靈活配置共享狀態(tài)或者私有狀態(tài)

支持promise

快速了解請直接跳到總結(jié)

初識

3大板塊和幾個(gè)關(guān)鍵變量

Provider: 注入狀態(tài)實(shí)例，傳遞map，本質(zhì)是Context.Provider，可嵌套達(dá)成鏈?zhǔn)絺鬟f
Container: 狀態(tài)管理類，遵循React的API，發(fā)布訂閱模式，通過new生成狀態(tài)管理實(shí)例
Subscribe: 訂閱狀態(tài)組件，本質(zhì)是Context.Consumer，接收Provider提供的map，視圖渲染組件
map: new Map()，通過類查找當(dāng)前類創(chuàng)建的狀態(tài)管理實(shí)例

深入

這里引入官方例子

// @flow
import React from "react";
import { render } from "react-dom";
import { Provider, Subscribe, Container } from "unstated";

type CounterState = {
  count: number
};
// 定義一個(gè)狀態(tài)管理類
class CounterContainer extends Container {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}
// 渲染視圖組件(Context.Consumer的模式)
function Counter() {
  return (
    
      {counter => (
        
          
          {counter.state.count}
          
        
      )}
    
  );
}

render(
  
    
  ,
  document.getElementById("root")
);

這里Counter是我們自定義的視圖組件，首先使用包裹，接著在Counter內(nèi)部，調(diào)用組件，
傳遞一個(gè)數(shù)組給props.to，這個(gè)數(shù)組內(nèi)存放了Counter組件需要使用的狀態(tài)管理類(此處也可傳遞狀態(tài)管理實(shí)例)。

Provider

export function Provider(props: ProviderProps) {
  return (
    
      {parentMap => {
        let childMap = new Map(parentMap);
        // 外部注入的狀態(tài)管理實(shí)例
        if (props.inject) {
          props.inject.forEach(instance => {
            childMap.set(instance.constructor, instance);
          });
        }

        // 負(fù)責(zé)將childMap傳遞，初始為null
        return (
          
            {props.children}
          
        );
      }}
    
  );
}

這里的模式是


  ()=>{
    /* ... */
    return {props.children}
  }

有3個(gè)注意點(diǎn)：

外層嵌套可以嵌套調(diào)用。


 /* ... */
 
 /* ... */

props.inject可以注入現(xiàn)成的狀態(tài)管理實(shí)例，添加到map之中。

返回值寫成props.children。

返回值寫成props.children的意義

簡單一句話概括，這么寫可以避免React.Context改變導(dǎo)致子組件的重復(fù)渲染。

具體看這里：避免React Context導(dǎo)致的重復(fù)渲染

Container

export class Container {
  // 保存狀態(tài) 默認(rèn)為{}
  state: State;
  // 保存監(jiān)聽函數(shù)，默認(rèn)為[]
  _listeners: Array = [];

  setState(
    updater: $Shape | ((prevState: $Shape) => $Shape),
    callback?: () => void
  ): Promise {
    return Promise.resolve().then(() => {
      let nextState;

      /* 利用Object.assign改變state */

      // 執(zhí)行l(wèi)istener(promise)
      let promises = this._listeners.map(listener => listener());

      // 所有Promise執(zhí)行完畢
      return Promise.all(promises).then(() => {
        // 全部listener執(zhí)行完畢，執(zhí)行回調(diào)
        if (callback) {
          return callback();
        }
      });
    });
  }

  // 增加訂閱(這里默認(rèn)的訂閱就是React的setState空值(為了重新渲染)，也可以添加自定義監(jiān)聽函數(shù))
  subscribe(fn: Listener) {
    this._listeners.push(fn);
  }

  // 取消訂閱
  unsubscribe(fn: Listener) {
    this._listeners = this._listeners.filter(f => f !== fn);
  }
}

Container內(nèi)部邏輯很簡單，改變state，執(zhí)行監(jiān)聽函數(shù)。

其中有一個(gè)_listeners，是用于存放監(jiān)聽函數(shù)的。

每個(gè)狀態(tài)管理實(shí)例存在一個(gè)默認(rèn)監(jiān)聽函數(shù)onUpdate，
這個(gè)默認(rèn)的監(jiān)聽函數(shù)的作用就是調(diào)用React的setState強(qiáng)制視圖重新渲染。

這里的監(jiān)聽函數(shù)內(nèi)部返回Promise，最后通過Promise.all確保執(zhí)行完畢，然后執(zhí)行回調(diào)參數(shù)。

因此setState在外面使用也可以使用then。

例如，在官方例子中：

increment() {
    this.setState({ count: this.state.count + 1 },()=>console.log("2"))
    .then(()=>console.log("3") )
    console.log("1") 
  }
  // 執(zhí)行順序是 1 -> 2 ->3

2個(gè)注意點(diǎn)：

setState和React API一致，第一個(gè)參數(shù)傳入object或者function，第二個(gè)傳入回調(diào)

這里通過Promise.resolve().then模擬this.setState的異步執(zhí)行

關(guān)于Promise.resolve和setTimeout的區(qū)別

簡單的說兩者都是異步調(diào)用，Promise更快執(zhí)行。

setTimeout(()=>{},0)會放入下一個(gè)新的任務(wù)隊(duì)列

Promise.resolve().then({})會放入微任務(wù)，在調(diào)用棧為空時(shí)立刻補(bǔ)充調(diào)用棧并執(zhí)行(簡單理解為當(dāng)前任務(wù)隊(duì)列尾部)

更多詳細(xì)可以看這里提供的2個(gè)視頻：https://stackoverflow.com/a/38752743

Subscribe

export class Subscribe extends React.Component<
  SubscribeProps,
  SubscribeState
> {
  state = {};
  // 存放傳入的狀態(tài)組件
  instances: Array = [];
  unmounted = false;

  componentWillUnmount() {
    this.unmounted = true;
    this._unsubscribe();
  }

  _unsubscribe() {
    this.instances.forEach(container => {
      // container為當(dāng)前組件的每一個(gè)狀態(tài)管理實(shí)例
      // 刪除listeners中的this.onUpdate
      container.unsubscribe(this.onUpdate);
    });
  }

  onUpdate: Listener = () => {
    return new Promise(resolve => {
      // 組件未被卸載
      if (!this.unmounted) {
        // 純粹是為了讓React更新組件
        this.setState(DUMMY_STATE, resolve);
      } else {
        // 已經(jīng)被卸載則直接返回
        resolve();
      }
    });
  };
  
  /* ... */
}

這里的關(guān)鍵就是instances，用于存放當(dāng)前組件的狀態(tài)管理實(shí)例。

當(dāng)組件unmount的時(shí)候，會unsubscribe當(dāng)前狀態(tài)管理實(shí)例的默認(rèn)監(jiān)聽函數(shù)，那么如果當(dāng)前的狀態(tài)管理實(shí)例是共享的，會不會有影響呢？

不會的。往后看可以知道，當(dāng)state每次更新，都會重新創(chuàng)建新的狀態(tài)管理實(shí)例(因?yàn)?b>props.to的值可能會發(fā)生變化，例如取消某一個(gè)狀態(tài)管理實(shí)例)，
而每次創(chuàng)建時(shí)，都會先unsubscribe再subscribe，確保不會重復(fù)添加監(jiān)聽函數(shù)。

onUpdate就是創(chuàng)建狀態(tài)管理組件時(shí)默認(rèn)傳遞的監(jiān)聽函數(shù)，用的是React的setState更新一個(gè)DUMMY_STATE(空對象{})。

export class Subscribe extends React.Component<
  SubscribeProps,
  SubscribeState
> {
  /* 上面已講 */

  _createInstances(
    map: ContainerMapType | null,
    containers: ContainersType
  ): Array {
    // 首先全部instances解除訂閱
    this._unsubscribe();

    // 必須存在map 必須被Provider包裹才會有map
    if (map === null) {
      throw new Error(
        "You must wrap your  components with a "
      );
    }

    let safeMap = map;
    // 重新定義當(dāng)前組件的狀態(tài)管理組件(根據(jù)to傳入的數(shù)組)
    let instances = containers.map(ContainerItem => {
      let instance;

      // 傳入的是Container組件，則使用
      if (
        typeof ContainerItem === "object" &&
        ContainerItem instanceof Container
      ) {
        instance = ContainerItem;
      } else {
        // 傳入的不是Container，可能是其他自定義組件等等(需要用new執(zhí)行)，嘗試獲取
        instance = safeMap.get(ContainerItem);

        // 不存在則以它為key，value是新的Container組件
        if (!instance) {
          instance = new ContainerItem();
          safeMap.set(ContainerItem, instance);
        }
      }

      // 先解綁再綁定，避免重復(fù)訂閱
      instance.unsubscribe(this.onUpdate);
      instance.subscribe(this.onUpdate);

      return instance;
    });

    this.instances = instances;
    return instances;
  }
  
  /* ... */
}

在_createInstances內(nèi)部，如果檢查到傳入的props.to的值已經(jīng)是狀態(tài)管理實(shí)例(私有狀態(tài)組件)，那么直接使用即可，
如果傳入的是類class(共享狀態(tài)組件)，會嘗試通過查詢map，不存在的則通過new創(chuàng)建。

export class Subscribe extends React.Component<
  SubscribeProps,
  SubscribeState
> {
  
  /* 上面已講 */
  
  render() {
    return (
      
      /* Provider傳遞的map */
      {map =>
          // children是函數(shù)
          this.props.children.apply(
            null,
            // 傳給子函數(shù)的參數(shù)(傳進(jìn)當(dāng)前組件的狀態(tài)管理實(shí)例)
            this._createInstances(map, this.props.to)
          )
        }
      
    );
  }
}

每一次render都會創(chuàng)建新的狀態(tài)管理實(shí)例。

到此，3大板塊已經(jīng)閱讀完畢。

總結(jié)

簡單易用，與React一致的API，一致的書寫模式，讓使用者很快上手。

并沒有規(guī)定如何管理這些狀態(tài)管理類，非常靈活。

我們可以學(xué)redux將所有狀態(tài)放到一個(gè)共享狀態(tài)管理實(shí)例內(nèi)部，
例如通過Provider的inject屬性注入，

或者針對每一個(gè)組件創(chuàng)建多帶帶的狀態(tài)管理實(shí)例(可共享可獨(dú)立)(unstated作者推薦)，

一切可以按照自己的想法，但同時(shí)也要求使用者自己定義一些規(guī)則去約束寫法。

僅僅是管理了狀態(tài)，每次更新都是一個(gè)全新的instance集合，并沒有做任何對比，需要我們在視圖層自己實(shí)現(xiàn)。

返回值寫成props.children的意義。

關(guān)于Promise.resolve().then({})和setTimeout(()=>{},0)的區(qū)別。

導(dǎo)圖

源碼閱讀專欄對一些中小型熱門項(xiàng)目進(jìn)行源碼閱讀和分析，對其整體做出導(dǎo)圖，以便快速了解內(nèi)部關(guān)系及執(zhí)行順序。
當(dāng)前源碼(帶注釋)，以及更多源碼閱讀內(nèi)容：https://github.com/stonehank/sourcecode-analysis，歡迎fork，求