[Web 前端] MobX

時間  2019-11-10
標籤 web 前端 mobx 欄目 HTML 简体版
原文   原文鏈接

1. 介紹

1.1. 原理

React的render是 狀態 轉化爲樹狀結構的渲染組件的方法
而MobX提供了一種存儲，更新 狀態 的方法
React 和 MobX都在優化着軟件開發中相同的問題。
React 使用的方法是讓虛擬DOM來減小繁瑣而沉重的DOM變化。
而MobX則經過一個虛擬的狀態依賴圖表來讓react組件和應用狀態同步化來減小沒必要要的狀態致使組件更新javascript

1.2. 安裝

MobX：前端

npm install mobx --save

React bindings：java

npm install mobx-react --save

1.3. 要點

MobX看起來很複雜的樣子，實際上是用它只須要三步react

  1. 定義你的狀態，讓它們成爲觀察者(observable)
    存儲狀態(Store state)能夠是任何的數據結構，隨你定義爲：對象，數組，類，循環結構，引用都沒所謂。但須要記住一點，就是：隨着時間的變化，用MobX 去把它們定義成觀察者(observable)
import {observable} from 'mobx'
let appState = observable({
    timer: 0
})

 

  1. 咱們不須要讓appState去觀察什麼。你如今就能建立視圖(view)，每當appState的相關數據發生變化的時候，就會自動更新。MobX會採用最優的方式去更新你的視圖。如下有一個例子來講明如何使用，其中使用了ES6／ES7的語法（固然MobX也是支持ES5），代碼中@的意義
import {observer} from 'mobx-react';
@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
                Seconds passed: {this.props.appState.timer}
            </button>);
    }
    onReset () {
        //appState.resetTimer會在下一節完成
        this.props.appState.resetTimer();
    }
};
React.render(<TimerView appState={appState} />, document.body);

 

  1. 修改狀態
    第三節要說的是修改狀態。MobX和其餘框架不一樣，它不會要求你去作什麼事情，它只是幫助你去作簡單的事情
appState.resetTimer = action(function reset() {
    appState.timer = 0;
});
setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

 

其中action包裝用法只能在strict模式下使用，請記得在你的javascript文件頭寫上：'use strict'。git

2. API

從上面的例子能夠看到，MobX的API其實很少：observable, computed, reactions, actionses6

2.1. observable(value)

其中的value能夠是JS原定的數據結構，引用，對象，數組，ES6的mapgithub

  1. 若是value是一個map的話，則須要使用一個調節器（modifier）asMap來使用。這時候會返回一個Observable Map
  2. 若是是一個數組，返回Observable Array
  3. 若是是一個沒有屬性的對象，則返回一個Observable Object
  4. 若是是一個有屬性的對象，JS原有的數據結構，函數等，返回一個** Boxed Observable**。MobX不會自動讓一個有屬性的對象成爲觀察者。這是這個有屬性的對象的構造函數應該作的事情，你可使用extendObservable在它的構造函數裏面，或者在它的類使用@observable去定義。

如下是一些例子：npm

const map = observable(asMap({ key: "value"}));
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable(20);
temperature.set(25);

 

2.2. @observable

import {observable} from "mobx";
class OrderLine {
    @observable price:number = 0;
    @observable amount:number = 1;
    constructor(price) {
        this.price = price;
    }
    //這裏在下一節會說到
    @computed get total() {
        return this.price * this.amount;
    }
}
const line = new OrderLine();
console.log("price" in line); // true
//hasOwnProperty：判斷一個對象是否有你給出名稱的屬性或對象。須要注意，此方法沒法檢查該對象的原型鏈中是否具備該屬性
console.log(line.hasOwnProperty("price")); //false

 

若是你的環境不支持ES6/7的語法的話，其實@observable key = value; 只是extendObservable(this, { key: value })的語法糖。所以在ES5環境下你也能使用json

2.3. (@)computed

Computed values 就像一個算術公式同樣去從現有的狀態或其餘值去計算出須要的值。計算的耗費是不可低估的。Computed儘量幫你減小其中的耗費。它們是高度優化的，請把它用在可能用到的地方。redux

不要混淆下一節說到的autorun。雖然他們都是被動調用的表達式。可是……
Computed使用狀況：若是你須要產生一個有觀察者(observers)參數計算的新的值的時候
autorun使用狀況：你不想產生一個新的值就想達到一個新的效果/功能。就像是打log或者進行網絡請求
Computed values是自動幫你從你的狀態(state)值和其餘計算輔助值來計算的。MobX作了不少的優化。當參與計算的值沒有發生改變，Computed是不會從新運行。若是參與計算的值沒有被使用，Computed values是暫停的。

若是Computed values再也不是觀察者(observed)，那麼在UI上也會把它除掉，MobX能自動作垃圾回收。autorun則須要你本身手動去處理。若是參與計算的值再也不被使用，是不會緩存Computed的，因此從新計算是須要的。這個是最理想的默認狀況。若是你想保留，能夠了解一下keepalive和observe。

例子1: 在2.2的例子。@computed get

例子2: @computed set

class Foo {
    @observable length: 2,
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { //this is automatically an action, no annotation necessary
        this.length = Math.sqrt(value);
    }
}

 

須要注意的是：setter並不是用於直接改變參數計算的值,如例子中的length。而是做爲一個逆推導。

2.4. Autorun

Autorun是用在一些你想要產生一個不用觀察者參與的被動調用函數裏面。當autorun被使用的時候，一旦依賴項發生變化，autorun提供的函數就會被執行。與之相反的是，computed提供的函數只會在他有本身的觀察員(observers)的時候纔會評估是否從新執行，不然它的值被認爲是無用的。

根據這些經驗：若是你須要一個自動運行但卻不會產生任何新的值的結果的函數，那麼請使用Autorun。其餘狀況請使用computed。Autorun只是做用於若是達到某個效果或者功能，而不是計算某些值。若是有一個字符串做爲第一個參數存入Autorun，那麼它將成爲一個調試名稱。

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// prints '6'
numbers.push(4);
// prints '10'

 

2.5. @observer

  1. observer 函數/修飾器用於react組件。經過mobx-react依賴包來提供。它經過mobx.autorun來包裝了組件的render函數，以確保組件的render函數在任何數據的更改是強制從新渲染
import {observer} from "mobx-react";
var timerData = observable({
    secondsPassed: 0
});
setInterval(() => {
    timerData.secondsPassed++;
}, 1000);
@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
});
React.render(<Timer timerData={timerData} />, document.body);

 

tips: 若是還有其餘的decorators一塊兒或者高階組件的存在，請確保observer爲最內層（優先應用）的修飾器。不然它可能沒法工做。若是你只在ES5的環境下工做：其實observer不過是observer(class Timer ... { }) 的語法糖。

  1. 難點—組件中相關值的引用：
    MobX能作的事情不少，可是它卻不能把原始的值變成觀察者（儘管能夠經過包裹這個值來返回一個boxed observables的對象）。因此觀察者不是這個原始的值，而是返回後的對象的屬性值。修改一個剛纔的例子：
React.render(<Timer timerData={timerData.secondsPassed} />, document.body)

 

這時候程序並不會工做了。傳入組件的只是timerData裏面secondsPassed的當前值。在組件裏面，它是不可變的。

  1. 把你的組件內部狀態變成可觀察的
    和普通的類同樣，你能夠在你的組件使用@observable修飾器。這意味着你的組件擁有了一個內部state，並且它不須要使用react內部提供的繁瑣的setState機制。這個內部state能調起render函數，可是卻不能準確調起React的生命週期函數，例如：componentShouldUpdate / componentWillUpdate。若是你想要這些，最好使用react提供的API來建立state。固然也能夠這樣寫
import {observer} from "mobx-react"
import {observable} from "mobx"
@observer class Timer extends React.Component {
    @observable secondsPassed = 0
    componentWillMount() {
        setInterval(() => {
            this.secondsPassed++
        }, 1000)
    }
    render() {
        return (<span>Seconds passed: { this.secondsPassed } </span> )
    }
})
React.render(<Timer />, document.body)

 

  1. 鏈接observer和stores
    mobx-react提供了Provider組件讓你能夠把傳遞下來的stores做用在react提供的上下文機制。經過鏈接這些stores和observer，這些observer會成爲組件的屬性來使用。
const colors = observable({
   foreground: '#000',
   background: '#fff'
});
const App = () =>
  <Provider colors={colors}>
     <app stuff... />
  </Provider>;
const Button = observer(["colors"], ({ colors, label, onClick }) =>
  <button style={{
      color: colors.foreground,
      backgroundColor: colors.background
    }}
    onClick={onClick}
  >{label}<button>
);
// later..
colors.foreground = 'blue';
// all buttons updated

 

  1. componentWillReact
    React 的組件老是重新的堆棧去渲染。所以讓它它很難判斷一個組件是否須要從新渲染。在mobx-react裏面，你可使用從新定義的生命週期componentWillReact。它只會在觀察者發生變化的時候才從新渲染。
import {observer} from "mobx-react";
@observer class TodoView extends React.Component {
    componentWillReact() {
        console.log("I will re-render, since the todo has changed!");
    }
    render() {
        return <div>this.props.todo.title</div>;
    }
}

 

componentWillReact沒有任何參數，並且不會在render初始化以前執行（componentWillMount的區別)。而當接收新的屬性或者setState以後，它會被調用。

2.6. action

  1. 任何應用程序都有操做（action）。action是任何改變狀態的事物。使用MobX，您能夠經過標記它們在您的代碼中顯式地顯示您的操做（action）。它會更好的幫助你組織你的代碼。建議將它們用於修改可觀察量或具備反作用的任何函數中。
    須要注意的是：action是用在strict mode 中的
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
@action.bound(function() {})

@action createRandomContact() {
    this.pendingRequestCount++;
    superagent
         .get('https://randomuser.me/api/')
         .set('Accept', 'application/json')
         .end(action("createRandomContact-callback", (error, results) => {
                 if (error) console.error(error)
                 else {
                     const data = JSON.parse(results.text).results[0];
                     const contact = new Contact(this, data.dob, data.name, data.login.username, data.picture)
                     contact.addTag('random-user');
                     this.contacts.push(contact);
                     this.pendingRequestCount--;
                 }
        }
))}

 


  1. action 僅僅做用於當前運行的函數，而不能做用於當前函數調用的函數。這意味着在一些定時器或者網絡請求，異步處理的狀況下，它們的回調函數沒法對狀態作成改變。這些回調函數都應該有action包裹，若是例子裏面的 createRandomContact-callback 同樣。可是，若是你使用了async / await的話，最好的方式應該是使用 runInAction 來讓它變得更加簡單
@action /*optional*/ updateDocument = async () => {
    const data = await fetchDataFromUrl();
    /* required in strict mode to be allowed to update state: */
    runInAction("update state after fetching data", () => {
        this.data.replace(data);
        this.isSaving = true;
    })
}

 

  1. Bound actions
    目前看到的actions都是遵循在javascript中綁定的正常規則，可是在MobX 3引入了action.bound來自動綁定actions到目標對象上。和action的使用不同，不須要一個名字參數。它的名稱始終基於綁定到屬性的操做上。須要注意的是，在箭頭函數上不要這樣使用，由於箭頭函數已經綁定了上下文，不能在從新更改上下文
class Ticker {
    @observable this.tick = 0

    @action.bound
    increment() {
        this.tick++ // 'this' will always be correct
    }
}
const ticker = new Ticker()
setInterval(ticker.increment, 1000)

 

後記

啓動例子項目：進入

  1. 前端項目：npm install 或者 yarn install 打開本地的8080端口
  2. 後端部分：進入 back文件夾，執行npm start 打開本地的3000端口
  3. 做爲對比：使用redux的例子：進入
做者：三月懶驢 連接：https://www.jianshu.com/p/2fb42dee32dd 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程