認識一下 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 MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類