【react】Mobx總結以及mobx和redux區別


Mobx解決的問題

傳統react使用的數據管理庫為Redux。Redux要解決的問題是統一數據流,數據流完全可控並可追蹤。要實現該目標,便需要進行相關的約束

Redux由此引出dispatch action reducer等概念,對state的概念進行強約束,然而對於一些項目來說,太過強,便失去了靈活性。Mobx便是填補此空缺的

這里對Redux和Mobx進行簡單的對比:

1.Redux的編程范式是函數式的而Mox是面向對象的;

2.因此數據上來說Redux理想的是immutable,每次都返回一個新的數據,而Mobx從始至終都是一份引用。因此Redux是支持數據回溯的;

3.然而和Redux相比,使用mobx的組件可以做到精准更新,這一點得益於Mobx的observable;對應的Redux是用dispath進行廣播,通過Provider和connect來比對前后差別控制更新粒度,有時需要自己寫SCU;Mox更加精細。

 

Mobx的核心原理是通過action觸發state的變化,進而觸發state的衍生對象(computed value & Reactions)。

 

安裝

create-react-app mobxlearn --scripts-version=react-scripts-ts  

 

安裝依賴

 

 npm install --save-dev babel-plugin-transform-decorators-legacy
// 修飾符的插件

npm install @babel/plugin-proposal-decorators
// 裝飾器的一個插件

 

.babelrc

在根目錄創建一個.babelrc文件.輸入一下:

  

{
    "plugins":[
        [
          "@babel/plugin-proposal-decorators",
          {
              "legacy":true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
              "loose":true
          }
          ]
          ],
    "presets":[
        "react-app"
        ]
    
}

安裝Mobx和Mobx-react

 

npm install mobx mobx-react --save

State

  在Moxbx中,state就對應業務的原始狀態,通過observable方法,可以是這些狀態變得可觀察。

通常支持被observable的類型有三個,分別是Object, Array, Map;

對於原始類型,可以使用Obserable.box。
值得注意的一點是,當某一數據被observable包裝后,他返回的其實是被observable包裝后的類型

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray)); //ob is Array: false
console.log("ob:", obArray);//ob: ObservableArray {}

對於該問題,解決方法也很簡單,可以通過Mobx原始提供的observable.toJS()轉換成JS再判斷,或者直接使用Mobx原生提供的APIisObservableArray進行判斷。

computed

  Mobx中state的設計原則和redux有一點是相同的,那就是盡可能保證state足夠小,足夠原子。這樣設計的原則不言而喻,無論是維護性還是性能。那么對於依賴state的數據而衍生出的數據,可以使用computed。

簡而言之,你有一個值,該值的結果依賴於state,並且該值也需要被obserable,那么就使用computed。通常應該盡可能的使用計算屬性,並且由於其函數式的特點,可以最大化優化性能。

如果計算屬性依賴的state沒改變,或者該計算值沒有被其他計算值或響應(reaction)使用,computed便不會運行。在這種情況下,computed處於暫停狀態,此時若該計算屬性不再被observable。那么其便會被Mobx垃圾回收。

簡單介紹computed的一個使用場景

假如你觀察了一個數組,你想根據數組的長度變化作出反應,在不使用computed時代碼是這樣的

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 輸出 '3'
numbers.push(4);
// 輸出 '4'
numbers[0] = 0;
// 輸出 '4'

最后一行其實只是改了數組中的一個值,但是也觸發了autorun的執行。此時如果用computed便會解決該問題。

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 輸出 '3'
numbers.push(4);
// 輸出 '4'
numbers[0] = 1;

autorun

另一個響應state的api便是autorun和computed類似,每當依賴的值改變時,其都會改變。

不同的是,autorun沒有了computed的優化(當然,依賴值未改變的情況下也不會重新運行,但不會被自動回收)。因此在使用場景來說,autorun通常用來執行一些有副作用的。例如打印日志,更新UI等等。

action

  在redux中,唯一可以更改state的途徑便是dispatch一個action。這種約束性帶來的好處是可維護性的。整個state只要噶便必定是勇敢action觸發的,對此子要找到reducer中對用的action便能找到影響數據改變的原因。

強約束性是好的,但是Redux要達到約束性的目的,似乎要寫許多樣板代碼,雖說有許多庫都在解決該問題,然而Mobx從根本上來說會更加優雅。

  首先Mobx並不強制所有state的改變必須通過action來改變,這主要適用於一些較小的項目。對於較大型的,需要多人合作的項目來說,可以使用Mobx提供的api configure來強制。

Mobx.configure({enforceActions: true})

其原理也很簡單

function configure(options){
    if (options.enforceActions !== undefined) {
        globalState.enforceActions = !!options.enforceActions
        globalState.allowStateChanges = !options.enforceActions
    }
}

通過改變全局的strictMode以及allowStateChanges屬性的方式來實現強制使用action。

Mobx異步處理

和Redux不同的是,Mobx在異步處理上並不復雜,不需要引入額外的類似redux-thunk、redux-saga這樣的庫。
唯一需要注意的是,在嚴格模式下,對於異步action里的回調,若該回調也要修改observable的值,那么
該回調也需要綁定action。

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;

  @action
  changeA() {
    this.a = 0;
    setTimeout(this.changeB, 1000);
  }
  @action.bound
  changeB() {
    this.a = 1000;
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

這里用了action.bound語法糖,目的是為了解決javascript作用域問題。

另外一種更簡單的寫法是直接包裝action

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;
  @action
  changeA() {
    this.a = 0;
    setTimeout(action('changeB',()=>{
      this.a = 1000;
    }), 1000);
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到處寫action,可以使用Mobx提供的工具函數runInAction來簡化操作

 @action
  changeA() {
    this.a = 0;
    setTimeout(
      runInAction(() => {
        this.a = 1000;
      }),
      1000
    );
  }

通過該工具函數,可以將所有對observable值的操作放在一個回調里,而不是命名各種各樣的action。 

最后,Mobx提供的一個工具函數,其原理redux-saga,使用ES6的generator來實現異步操作,可以徹底擺脫action的干擾。

@asyncAction
  changeA() {
    this.a = 0;
    const data = yield Promise.resolve(1)
    this.a = data;
  }

  

Mobx原理分析

autorun

Mobx的核心就是通過observable觀察某一個變量,當該變量產生變化時,對應的autorun內的回調函數就會發生變化。

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
  console.log("ob.b:", ob.b);
});

ob.b = 2;

  

執行該代碼會發現,log了兩遍ob.b的值。其實從這個就能猜到,Mobx是通過代理變量的getter和setter來實現的變量更新功能。首先先代理變量的getter函數,然后通過預執行一遍autorun中回調,從而觸發getter函數,來實現觀察值的收集,依次來代理setter。之后只要setter觸發便執行收集好的回調就ok了。
具體源碼如下:

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun的核心就是這一段,這里view就是autorun里的回調函數。具體到track函數,比較關鍵到代碼是:

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction函數中會執行autorun里的回調函數,緊接着會觸發obserable中代理的函數:

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在get中會將回調與其綁定,之后更改了obserable中的值時,都會觸發這里的set,然后隨即觸發綁定的函數。 

Mobx的一些坑

通過autorun的實現原理可以發現,會出現很多我們想象中應該觸發,但是沒有觸發的場景,例如:

  1. 無法收集新增的屬性
const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
  if(ob.c){
    console.log("ob.c:", ob.c);
  }
});
ob.c = 1

  對於該問題,可以通過extendObservable(target, props)方法來實現

const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

 extendObservable該API會可以為對象新增加observal屬性。
如果你對變量的entry增刪非常關心,應該使用Map數據結構而不是Object。
2. 回調函數若依賴外部環境,則無法進行收集

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
  if(x == 1){
    console.log("ob.c:", ob.b);
  }
});
x = 1;
ob.b = 2;

很好理解,autorun的回調函數在預執行的時候無法到達ob.b那一行代碼,所以收集不到。

【轉載】原文鏈接鏈接:https://blog.csdn.net/weixin_44369568/article/details/90713881


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM