認識一下 Mobx

来源:https://www.cnblogs.com/dtux/archive/2022/12/22/16997848.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序(LuckyFBB) 前言 在之前的文章中，我們講述了 React 的數據流管理，從 props → context → Redux，以及 Redux 相 ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。

本文作者：霜序(LuckyFBB)

前言

在之前的文章中，我們講述了 React 的數據流管理，從 props → context → Redux，以及 Redux 相關的三方庫 React-Redux。

那其實說到 React 的狀態管理器，除了 Redux 之外，Mobx 也是應用較多的管理方案。Mobx 是一個響應式庫，在某種程度上可以看作沒有模版的 Vue，兩者的原理差不多

先看一下 Mobx 的簡單使用，線上示例

export class TodoList {
    @observable todos = [];

    @computed get getUndoCount() {
        return this.todos.filter((todo) => !todo.done).length;
    }
    @action add(task) {
        this.todos.push({ task, done: false });
    }
    @action delete(index) {
        this.todos.splice(index, 1);
    }
}

Mobx 藉助於裝飾器來實現，使得代碼更加簡潔。使用了可觀察對象，Mobx 可以直接修改狀態，不用像 Redux 那樣寫 actions/reducers。Redux 是遵循 setState 的流程，MobX就是幹掉了 setState 的機制

通過響應式編程使得狀態管理變得簡單和可擴展。Mobx v5 版本利用 ES6 的proxy來追蹤屬性，以前的舊版本通過Object.defineProperty實現的。通過隱式訂閱，自動追蹤被監聽的對象變化

Mobx 的執行流程，一張官網結合上述例子的圖

mobx

MobX將應用變為響應式可歸納為下麵三個步驟

  1. 定義狀態並使其可觀察

    使用observable對存儲的數據結構成為可觀察狀態

  2. 創建視圖以響應狀態的變化

    使用observer來監聽視圖，如果用到的數據發生改變視圖會自動更新

  3. 更改狀態

    使用action來定義修改狀態的方法

Mobx核心概念

observable

給數據對象添加可觀察的功能，支持任何的數據結構

const todos = observable([{
    task: "Learn Mobx",
    done: false
}])

// 更多的採用裝飾器的寫法
class Store {
    @observable todos = [{
        task: "Learn Mobx",
        done: false
    }]
}

computed

在 Redux 中，我們需要計算已經 completeTodo 和 unCompleteTodo，我們可以採用：在 mapStateToProps 中，通過 allTodos 過濾出對應的值，線上示例

const mapStateToProps = (state) => {
    const { visibilityFilter } = state;
    const todos = getTodosByVisibilityFilter(state, visibilityFilter);
    return { todos };
};

在 Mobx 中可以定義相關數據發生變化時自動更新的值，通過@computed調用getter/setter函數進行變更

一旦 todos 的發生改變，getUndoCount 就會自動計算

export class TodoList {
    @observable todos = [];

    @computed get getUndo() {
        return this.todos.filter((todo) => !todo.done)
    }

    @computed get getCompleteTodo() {
        return this.todos.filter((todo) => todo.done)
    }
}

action

動作是任何用來修改狀態的東西。MobX 中的 action 不像 redux 中是必需的，把一些修改 state 的操作都規範使用 action 做標註。

在 MobX 中可以隨意更改todos.push({ title:'coding', done: false })，state 也是可以有作用的，但是這樣雜亂無章不好定位是哪裡觸發了 state 的變化，建議在任何更新observable或者有副作用的函數上使用 actions。

在嚴格模式useStrict(true)下，強制使用 action

// 非action使用
<button
    onClick={() => todoList.todos.push({ task: this.inputRef.value, done: false })}
>
    Add New Todo
</button>

// action使用
<button
    onClick={() => todoList.add(this.inputRef.value)}
>
    Add New Todo
</button>

class TodoList {
    @action add(task) {
        this.todos.push({ task, done: false });
    }
}

Reactions

計算值 computed 是自動響應狀態變化的值。反應是自動響應狀態變化的副作用，反應可以確保相關狀態變化時指定的副作用執行。

  1. autorun

    autorun負責運行所提供的sideEffect並追蹤在sideEffect運行期間訪問過的observable的狀態

    接受一個函數sideEffect，當這個函數中依賴的可觀察屬性發生變化的時候，autorun裡面的函數就會被觸發。除此之外，autorun裡面的函數在第一次會立即執行一次。

    autorun(() => {
    console.log("Current name : " + this.props.myName.name);
});

// 追蹤函數外的間接引用不會生效
const name = this.props.myName.name;
autorun(() => {
    console.log("Current name : " + name);
});

  2. reaction

    reaction是autorun的變種，在如何追蹤observable方面給予了更細粒度的控制。 它接收兩個函數，第一個是追蹤並返回數據，該數據用作第二個函數，也就是副作用的輸入。

    autorun 會立即執行一次，但是 reaction 不會

    reaction(
    () => this.props.todoList.getUndoCount,
    (data) => {
        console.log("Current count : ", data);
    }
);

observer

使用 Redux 時，我們會引入 React-Redux 的 connect 函數，使得我們的組件能夠通過 props 獲取到 store 中的數據

在 Mobx 中也是一樣的道理，我們需要引入 observer 將組件變為響應式組件

包裹 React 組件的高階組件，在組件的 render 函數中任何使用的observable發生變化時，組件都會調用 render 重新渲染，更新 UI

⚠️ 不要放在頂層 Page，如果一個 state 改變，整個 Page 都會 render，所以 observer 儘量去包裹小組件，組件越小重新渲染的變化就越小

@observer
export default class TodoListView extends Component {
    render() {
        const { todoList } = this.props;
        return (
            <div className="todoView">
                <div className="todoView__list">
                    {todoList.todos.map((todo, index) => (
                        <TodoItem
                            key={index}
                            todo={todo}
                            onDelete={() => todoList.delete(index)}
                        />
                    ))}
                </div>
            </div>
        );
    }
}

Mobx原理實現

前文中提到 Mobx 實現響應式數據，採用了Object.defineProperty或者Proxy

上面講述到使用 autorun 會在第一次執行並且依賴的屬性變化時也會執行。

const user = observable({ name: "FBB", age: 24 })
autorun(() => {
    console.log(user.name)
})

當我們使用 observable 創建了一個可觀察對象user，autorun 就會去監聽user.name是否發生了改變。等於user.name被 autorun 監控了，一旦有任何變化就要去通知它

user.name.watchers.push(watch)
// 一旦user的數據發生了改變就要去通知觀察者
user.name.watchers.forEach(watch => watch())

action

observable

裝飾器一般接受三個參數: 目標對象、屬性、屬性描述符

通過上面的分析，通過 observable 創建的對象都是可觀察的，也就是創建對象的每個屬性都需要被觀察

每一個被觀察對象都需要有自己的訂閱方法數組

const counter = observable({ count: 0 })
const user = observable({ name: "FBB", age: 20 })
autorun(function func1() {
    console.log(`${user.name} and ${counter.count}`)
})
autorun(function func2() {
    console.log(user.name)
})

對於上述代碼來說，counter.count 的 watchers 只有 func1，user.name 的 watchers 則有 func1/func2

實現一下觀察者類 Watcher，藉助 shortid 來區分不同的觀察者實例

class Watcher {
    id: string
    value: any;
    constructor(v: any, property: string) {
        this.id = `ob_${property}_${shortid()}`;
        this.value = v;
    }
    // 調用get時，收集所有觀察者
    collect() {
        dependenceManager.collect(this.id);
        return this.value;
    }
    // 調用set時，通知所有觀察者
    notify(v: any) {
        this.value = v;
        dependenceManager.notify(this.id);
    }
}

實現一個簡單的裝飾器，需要攔截我們屬性的 get/set 方法，並且使用 Object.defineProperty 進行深度攔截

export function observable(target: any, name: any, descriptor: { initializer: () => any; }) {
    const v = descriptor.initializer();
    createDeepWatcher(v)
    const watcher = new Watcher(v, name);
    return {
        enumerable: true,
        configurable: true,
        get: function () {
            return watcher.collect();
        },
        set: function (v: any) {
            return watcher.notify(v);
        }
    };
};

function createDeepWatcher(target: any) {
    if (typeof target === "object") {
        for (let property in target) {
            if (target.hasOwnProperty(property)) {
                const watcher = new Watcher(target[property], property);
                Object.defineProperty(target, property, {
                    get() {
                        return watcher.collect();
                    },
                    set(value) {
                        return watcher.notify(value);
                    }
                });
                createDeepWatcher(target[property])
            }
        }
    }
}

在上面 Watcher 類中的get/set中調用了 dependenceManager 的方法還未寫完。在調用屬性的get方法時，會將函數收集到當前 id 的 watchers 中，調用屬性的set方法則是去通知所有的 watchers，觸發對應收集函數

那這這裡其實我們還需要藉助一個類，也就是依賴收集類DependenceManager，馬上就會實現

autorun

前面說到 autorun 會立即執行一次，並且會將函數收集起來，存儲到對應的observable.id的 watchers 中。autorun 實現了收集依賴，執行對應函數。再執行對應函數的時候，會調用到對應observable對象的get方法，來收集依賴

export default function autorun(handler) {
    dependenceManager.beginCollect(handler)
    handler()
    dependenceManager.endCollect()
}

實現DependenceManager類:

  • beginCollect: 標識開始收集依賴，將依賴函數存到一個類全局變數中
  • collect(id): 調用get方法時，將依賴函數放到存入到對應 id 的依賴數組中
  • notify: 當執行set的時候，根據 id 來執行數組中的函數依賴
  • endCollect: 清除剛開始的函數依賴，以便於下一次收集
class DependenceManager {
    _store: any = {}
    static Dep: any;
    beginCollect(handler: () => void) {
        DependenceManager.Dep = handler
    }
    collect(id: string) {
        if (DependenceManager.Dep) {
            this._store[id] = this._store[id] || {}
            this._store[id].watchers = this._store[id].watchers || []
            if (!this._store[id].watchers.includes(DependenceManager.Dep))
                this._store[id].watchers.push(DependenceManager.Dep);
        }
    }
    notify(id: string) {
        const store = this._store[id];
        if (store && store.watchers) {
            store.watchers.forEach((watch: () => void) => {
                watch.call(this);
            })
        }
    }
    endCollect() {
        DependenceManager.Dep = null
    }
}

一個簡單的 Mobx 框架都搭建好了~

computed

computed 的三個特點:

  • computed 方法是一個 get 方法
  • computed 會根據依賴的屬性重新計算值
  • 依賴 computed 的函數也會被重新執行

發現 computed 的實現大致和 observable 相似，從以上特點可以推斷出 computed 需要兩次收集依賴，一次是收集 computed 所依賴的屬性，一次是依賴 computed 的函數

首先定義一個 computed 方法，是一個裝飾器

export function computed(target: any, name: any, descriptor: any) {
    const getter = descriptor.get; // get 函數
    const _computed = new ComputedWatcher(target, getter);

    return {
        enumerable: true,
        configurable: true,
        get: function () {
            _computed.target = this
            return _computed.get();
        }
    };
}

實現 ComputedWatcher 類，和 Watcher 類差不多。在執行 get 方法的時候，我們和之前一樣，去收集一下依賴 computed 的函數，豐富 get 方法

class ComputedWatcher {
    // 標識是否綁定過recomputed依賴，只需要綁定一次
    hasBindAutoReCompute: boolean | undefined;
    value: any;
    // 綁定recompute 和 內部涉及到的觀察值的關係
    _bindAutoReCompute() {
        if (!this.hasBindAutoReCompute) {
            this.hasBindAutoReCompute = true;
            dependenceManager.beginCollect(this._reComputed, this);
            this._reComputed();
            dependenceManager.endCollect();
        }
    }
    // 依賴屬性變化時調用的函數
    _reComputed() {
        this.value = this.getter.call(this.target);
        dependenceManager.notify(this.id);
    }
    // 提供給外部調用時收集依賴使用
    get() {
        this._bindAutoReCompute()
        dependenceManager.collect(this.id);
        return this.value
    }
}

observer

observer 相對實現會簡單一點，其實是利用 React 的 render 函數對依賴進行收集，我們採用在 componnetDidMount 中調用 autorun 方法

export function observer(target: any) {
    const componentDidMount = target.prototype.componentDidMount;
    target.prototype.componentDidMount = function () {
        componentDidMount && componentDidMount.call(this);
        autorun(() => {
            this.render();
            this.forceUpdate();
        });
    };
}

至此一個簡單的 Mobx 就實現了，線上代碼地址

文章中使用的 Object.defineProperty 實現，Proxy 實現差不多，線上代碼地址

Mobx vs Redux

  1. 數據流

    Mobx 和 Redux 都是單向數據流，都通過 action 觸發全局 state 更新，再通知視圖

    Redux 的數據流

    redux

    Mobx 的數據流

    mobx1

  2. 修改數據的方式

    • 他們修改狀態的方式是不同的，Redux 每一次都返回了新的 state。Mobx 每次修改的都是同一個狀態對象，基於響應式原理，get時收集依賴，set時通知所有的依賴

    • 當 state 發生改變時，Redux 會通知所有使用 connect 包裹的組件；Mobx 由於收集了每個屬性的依賴，能夠精準通知

    • 當我們使用 Redux 來修改數據時採用的是 reducer 函數，函數式編程思想；Mobx 使用的則是面向對象代理的方式

  3. Store 的區別

    • Redux 是單一數據源，採用集中管理的模式，並且數據均是普通的 JavaScript 對象。state 數據可讀不可寫，只有通過 reducer 來改變
    • Mobx 是多數據源模式，並且數據是經過observable包裹的 JavaScript 對象。state 既可讀又可寫，在非嚴格模式下，action 不是必須的，可以直接賦值

一些補充

observable 使用函數式寫法

在採用的 proxy 寫法中，可以劫持到一個對象，將對象存在 weakMap 中，每次觸發對應事件去獲取相關信息
image

Proxy 監聽 Map/Set

image

總結

本文從 Mobx 的簡單示例開始，講述了一下 Mobx 的執行流程，引入了對應的核心概念，然後從零開始實現了一個簡版的 Mobx，最後將 Mobx 和 Redux 做了一個簡單的對比

參考鏈接


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MyBatis是如何初始化的？
    摘要：我們知道MyBatis和資料庫的交互有兩種方式有Java API和Mapper介面兩種，所以MyBatis的初始化必然也有兩種；那麼MyBatis是如何初始化的呢？ 本文分享自華為雲社區《MyBatis詳解 - 初始化基本過程》，作者：龍哥手記 。 MyBatis初始化的方式及引入 MyBat ...
  • 手寫Promise方法（實現Promise A+規範）
    手寫 Promise Promise 構造函數 我們先來寫 Promise 構造函數的屬性和值，以及處理new Promise()時會傳入的兩個回調函數。如下： class myPromise { constructor(func) { this.state = 'pending' // Promi ...
  • Fabric.js 修改畫布交互方式到底有什麼用？
    本文簡介 點贊 + 關註 + 收藏 = 學會了 fabric.js 為我們提供了很多厲害的方法。今天要搞明白的一個東西是 canvas.interactive 。 官方文檔對 canvas.interactive 的解釋是： Indicates that canvas is interactive. ...
  • 教你用JavaScript實現滑鼠特效
    案例介紹 歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個滑鼠愛心特效。滑鼠在頁面移動時會出現彩色愛心特效。通過實戰我們將學會createElement方法、appendChild方法、setTimeout方法。 案例演示 頁面出現後，滑鼠在 ...
  • 什麼是 HTML？
    HTML 介紹 引用 最全面的前端筆記來啦，包含了入門到入行的筆記，還支持實時效果預覽。小伙伴們不需要在花時間去寫筆記，或者是去網上找筆記了。面試高頻提問和你想要的筆記都幫你寫好了。支持移動端和PC端閱讀，深色和淺色模式。 原文鏈接：https://note.noxussj.top/ ::: war ...
  • 教你用JavaScript獲取大轉盤
    案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個大轉盤。當你難以抉擇的時候不妨用這個案例來幫你做選擇。通過編程實戰我們可以學到按鈕的點擊事件onclick()以及定時器的使用. 案例演示 每個選擇都展示在不同的盒子里，通過點擊中間的 ...
  • 深入原型鏈與繼承（詳解JS繼承原理）
    原型鏈與繼承 new 關鍵字的執行過程 讓我們回顧一下，this 指向里提到的new關鍵字執行過程。 創建一個新的空對象 將構造函數的原型賦給新創建對象（實例）的隱式原型 利用顯式綁定將構造函數的 this 綁定到新創建對象併為其添加屬性 返回這個對象 手寫new關鍵字的執行過程： function ...
  • Visual Studio Code 安裝教程
    Visual Studio Code 介紹 Visual Studio Code 是一款非常輕量的前端代碼編寫工具，也是目前比較主流的。其中還包含了豐富的插件市場、非常好看的界面風格、可在軟體內直接使用命令行工具等。 :::warning 建議 在學習前端之前可以先把軟體下載好，方便實踐操作。 :: ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類