Mobx基礎

這篇文章主要用於學習和上手mobx, 主要有如下內容：

• mobx簡介
• mobx核心概念
• mobx Demo: Electron-react-mobx

Mobx中文文檔: suprise.gitbooks.io/mobx-cn/con… Mobx官網: cn.mobx.js.org/ Mobx概念: cn.mobx.js.org/intro/conce…

mobx簡介

mobx經過透明的函數響應式編程(transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴展。MobX背後的哲學很簡單: 任何源自應用狀態的東西都應該自動地得到。 React 和 MobX 是一對強力組合。React 經過提供機制把應用狀態轉換爲可渲染組件樹並對其進行渲染。而MobX提供機制來存儲和更新應用狀態供 React 使用。

接下來咱們會來先了解下核心概念和寫法，最後結合一個demo來理解其做用和使用。

核心概念 - Observable state(可觀察的狀態)

1. MobX 爲現有的數據結構(如對象，數組和類實例)添加了可觀察的功能,有2種方式： （1）註解方式

import { observable } from "mobx";

class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;
}
複製代碼

（2）非註解方式 javascript import { decorate, observable } from "mobx"; class Todo { id = Math.random(); title = ""; finished = false; } decorate(Todo, { title: observable, finished: observable })

核心概念 - Computed values(計算值)

做用: 當相關數據變化後，與其相關的數據值若是使用了@computed則會自動更新。

class TodoList {
    @observable todos = [];
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
  }
複製代碼

當todos數組變化後，unfinishedTodoCount獲得的結果也會自動變化。只有在須要他們的時候，他們纔會自動更新。

核心概念 - Reactions(反應)

Reactions 和計算值很像，但它不是產生一個新的值，而是會產生一些反作用，reactions 在 響應式編程和命令式編程之間創建溝通的橋樑。 使用autorun、reaction 和 when 函數便可簡單的建立自定義 reactions，以知足你的具體場景。 簡而言之：狀態改變後，觸發一些你想觸發的動做，好比打印日誌等，就叫作Reactions(反應)

核心概念 - Actions(動做)

1. 狀態應該以某種方式來更新， 動做是一段能夠改變狀態的代碼。

核心概念 - Derivations(衍生)

任何 源自狀態而且不會再有任何進一步的相互做用的東西就是衍生。 衍生以多種形式存在:

• 用戶界面
• 衍生數據，好比剩下的待辦事項的數量。
• 後端集成，好比把變化發送到服務器端。

MobX 區分了兩種類型的衍生:

• Computed values(計算值) - 它們是永遠可使用純函數(pure function)從當前可觀察狀態中衍生出的值。
• Reactions(反應) - Reactions 是當狀態改變時須要自動發生的反作用。須要有一個橋樑來鏈接命令式編程(imperative programming)和響應式編程(reactive programming)。或者說得更明確一些，它們最終都須要實現I / O 操做。

黃金法則: 若是你想建立一個基於當前狀態的值時，請使用 computed

Mobx原則

1. MobX 支持單向數據流，也就是動做改變狀態，而狀態的改變會更新全部受影響的視圖。

   

2. 當狀態改變時，全部衍生都會進行原子級的自動更新。所以永遠不可能觀察到中間值。
3. 全部衍生默認都是同步更新。這意味着例如動做能夠在改變狀態以後直接能夠安全地檢查計算值。
4. 計算值是延遲更新的。任何不在使用狀態的計算值將不會更新，直到須要它進行反作用（I / O）操做時。 若是視圖再也不使用，那麼它會自動被垃圾回收。
5. 全部的計算值都應該是純淨的。它們不該該用來改變狀態。

mobx Demo

估計上面會看的一臉懵逼，看個demo就理解了：Electron-react-mobx

有問題歡迎加羣溝通哦：