mobx

firim 發布于2023-04-26 00:41 / 2111人閱讀

當今的前端開發中，狀態管理是非常重要的一個方面。MobX是一個流行的狀態管理庫，它可以幫助我們更輕松地管理應用程序的狀態。在這篇文章中，我們將介紹MobX的一些基本概念和使用方法。 MobX是一個響應式狀態管理庫，它的核心思想是將狀態轉換為可觀察的對象。這意味著當狀態發生變化時，所有依賴于該狀態的組件都將自動更新。這種自動更新的機制可以幫助我們避免手動管理狀態的復雜性。在MobX中，我們可以使用@observable裝飾器來標記我們的狀態對象。例如：

import { observable } from "mobx";

class Store {
  @observable count = 0;
}

在這個例子中，我們定義了一個名為“Store”的類，并使用@observable裝飾器標記了一個名為“count”的屬性。這意味著當“count”屬性發生變化時，所有依賴于它的組件都將自動更新。除了@observable之外，MobX還提供了其他一些裝飾器，用于定義計算屬性、動作和反應。例如，我們可以使用@computed裝飾器來定義一個基于現有狀態計算出來的屬性：

import { observable, computed } from "mobx";

class Store {
  @observable count = 0;

  @computed get doubledCount() {
    return this.count * 2;
  }
}

在這個例子中，我們定義了一個名為“doubledCount”的計算屬性，它基于“count”屬性計算出來。當“count”屬性發生變化時，“doubledCount”屬性也會自動更新。除了計算屬性之外，我們還可以使用@action裝飾器來定義一個動作。動作是一種可以修改狀態的方法，它可以幫助我們更好地控制狀態的變化。例如：

import { observable, action } from "mobx";

class Store {
  @observable count = 0;

  @action increment() {
    this.count++;
  }
}

在這個例子中，我們定義了一個名為“increment”的動作，它可以將“count”屬性加1。當我們調用“increment”方法時，MobX會自動更新所有依賴于“count”屬性的組件。最后，我們還可以使用反應來響應狀態的變化。反應是一種可以在狀態變化時自動執行的方法，它可以幫助我們更好地控制應用程序的行為。例如：

import { observable, autorun } from "mobx";

class Store {
  @observable count = 0;
}

const store = new Store();

autorun(() => {
  console.log(store.count);
});

store.count = 1; // 輸出1
store.count = 2; // 輸出2

在這個例子中，我們定義了一個名為“autorun”的反應，它會在“count”屬性發生變化時自動執行。當我們將“count”屬性設置為1和2時，反應會自動輸出相應的值。總之，MobX是一個非常強大的狀態管理庫，它可以幫助我們更輕松地管理應用程序的狀態。通過使用@observable、@computed、@action和反應等裝飾器，我們可以更好地定義和控制狀態的變化。如果您還沒有嘗試過MobX，那么我建議您花些時間學習它，它將會是您開發應用程序的強大工具。

云服務器 GPU云服務器 Mobx

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/130862.html

mobx學習總結

摘要：原理分析的核心就是通過觀察某一個變量，當該變量產生變化時，對應的內的回調函數就會發生變化。回調函數若依賴外部環境，則無法進行收集很好理解，的回調函數在預執行的時候無法到達那一行代碼，所以收集不到。 Mobx解決的問題傳統React使用的數據管理庫為Redux。Redux要解決的問題是統一數據流，數據流完全可控并可追蹤。要實現該目標，便需要進行相關的約束。Redux由此引出了dispa...

roundstones 2019-08-22 15:30 評論0 收藏0
【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
mobx——rudex的簡單替代品

摘要：是一個的簡單可擴展的狀態管理庫。它的副作用是自動更新。該函數返回一個值，當返回值為的時候，才會繼續觸發第一個函數。當返回值為時，不再繼續監聽。包含一個，該值用來區分執行事件的類型。 mobx 能干什么使用 react 寫小型應用，數據、業務邏輯和視圖的模塊劃分不是很細是沒有問題的。在這個階段，引入任何狀態管理庫，都算是奢侈的。但是隨著頁面邏輯的復雜度提升，在中大型應用中，數據、業務邏...

DevWiki 2019-08-21 11:25 評論0 收藏0
React 狀態管理庫: Mobx

摘要：關心性能的情況下，需要手動設置這時就需要引入狀態管理庫。現在常用的狀態管理庫有和，本文會重點介紹，然后會將和進行對比，最后展望下未來的狀態管理方面趨勢。如果在任何地方都修改可觀察數據，將導致頁面狀態難以管理。 React 是一個專注于視圖層的庫。React 維護了狀態到視圖的映射關系，開發者只需關心狀態即可，由 React 來操控視圖。在小型應用中，單獨使用 React 是沒什么問題...

liujs 2019-08-20 17:49 評論0 收藏0
【用故事解讀 MobX源碼（一）】 autorun

摘要：隨后，執行官給出一張當張三存款發生變化之時，此機構的運作時序圖的確，小機構靠人力運作，大機構才靠制度運轉。第一條語句創建觀察員第一條語句張三我們調用的時候，就創建了對象，對象的所有屬性都將被拷貝至一個克隆對象并將克隆對象轉變成可觀察的。 ================前言=================== 初衷：網上已有很多關于 MobX 源碼解讀的文章，但大多閱讀成本甚高。...

qieangel2013 2019-08-22 15:19 評論0 收藏0
我為什么從Redux遷移到了Mobx

摘要：需要注意的是，在中，需要把數據聲明為。同時還提供了運行時的類型安全檢查。在利用了，使異步操作可以在一個函數內完成并且可以被追蹤。例如在中，數組并不是一個，而是一個類的對象，這是為了能監聽到數據下標的賦值。 Redux是一個數據管理層，被廣泛用于管理復雜應用的數據。但是實際使用中，Redux的表現差強人意，可以說是不好用。而同時，社區也出現了一些數據管理的方案，Mobx就是其中之一。 R...

DevYK 2019-08-21 17:50 評論0 收藏0