Mobx和Mobe React傻瓜式教程

2021-08-09 19:43:20 字數 2104 閱讀 2321

因為我也不怎麼會,所以講的很小白,但是我相信很多人都需要這種小白式的教程.而且趁著我還理的暫時清除,趕緊記下來,防止自己明天失憶.

很多教程都是直接講怎麼使用,但是我感覺應該先講這玩意有什麼用.

存放全域性有效資料.

比如,在react中乙個思想就是乙個頁面的資料儲存在該頁面的state中,但是假設更多更多頁面,多到這些頁面沒有什麼關聯的情況下都需要使用相同的資料,而且在乙個頁面中進行資料修改後,在別的頁面也能讀取,這樣就需要用這玩意,把我們需要共享的資料儲存起來.

明確這一點後,問題就是如何儲存資料.

首先,作為前端小白,第一次看見@action@observable這些東西的時候,直接懵逼,這些是什麼鬼?我的前端還在幾年前的記憶裡.

接著,我講解的肯定是不對,或者不準確的,但是出發點是幫助你理解這玩意是怎麼用的,對於我們小白來說,先能用,用著用著,原理就自然而然的出來了.你可以簡單的理解,就是在你的函式之前執行了另乙個函式,而這個函式到底幹了什麼,不用管,直接看他會對你的**產生什麼影響就好.

下面我列舉乙個銀行取錢的例子,放心,不全是**:

家裡有很多家銀行的帳號,但是有一些是父母專門用的,有一些是大家共用的,比如你的壓歲錢.....

為了做乙個區分,大家在大家都可以用的帳號的存摺上貼上@observable的logo,大家看見這個logo就標誌這玩意是大家都共用的.接著大家規定了花這筆錢的渠道:

// 我最討厭在看不懂**的時候還要邊看邊翻譯英文,我就拿中文寫了,反正不用到機器上去跑.....

class 家庭規則else

}去遊樂圓=(門票錢)=>else

}}// 下面我們讓這個家庭規則生效

const 已通過家庭規則=new 家庭規則();

export default 已通過的家庭規則

好了,到這裡我們已經定義好了家庭規則,然後在乙個月黑風高的夜晚,你和你爸準備去突襲遊樂園,而你媽準備去買菜:

import  from 'mobx-react'

import react from 'react'

// 家庭規則不止一條,上面我們只是展示了其中一條,而家庭規則集合則是上面多條類似的集合

@inject(家庭規則集合)

// 這個observer的作用等下再講

@observer

class 突襲遊樂園作戰方案 extends react.component

}}export default 突襲遊樂園作戰方案

好了,看完你和你爸的小計畫後再來看看你媽:

import  from 'mobx-react'

import react from 'react'

@inject(家庭規則集)

@observer

class 主婦深夜逛菜場計畫 extends react.component

)}elseelse}}

}export default 主婦深夜逛菜場計畫

到這裡我們來解釋一下@observer的意義,首先,你們誰都沒有現金!!!錢在**?在銀行裡,即,如果你媽先買了菜,那麼你和你爸的錢就不夠了,如果你和你爸先進了遊樂園,那麼你媽很有可能就買不起菜了.你們共用乙個this.props.家庭規則集合.公共資金賬戶

通過@inject()引入資料的方式,資料被自動儲存在元件的this.props.中.

模擬到mobe-react上,那就是你需要的資料不再儲存在this.state中,而是乙個公共的快取中了,其中快取中資料的修改都會引起@observer中的資料.對應到react中就是會導致頁面的檢視重新渲染.

到這裡我們再解釋一下公共這兩個字的含義:

上面是非嚴格模式,一旦開啟了嚴格模式就是需要這個來宣告你在該函式中對快取資料做了修改了.聽不懂也沒關係,去看原始碼的,這個時候至少不會從入門到放棄了.

Vue和mobx的基礎理解

vue mobx action 標記此動作會被observable,而觸發reaction 或autorun runinaction 非同步action,標記action中的非同步操作 extendobservable observable usestrict true 只能用action改變val...

狀態管理庫 MobX 和 react

class todostore report progress addtodo task const todostore new todostore 複製 當我們去建立乙個todostore,他擁有乙個todos集合,現在我們往這個todostore裡新增一些東西,為了明顯起見,就呼叫todosto...

狀態管理庫 MobX 和 react

class todostore report progress addtodo task const todostore new todostore 當我們去建立乙個 todostore,他擁有乙個 todos 集合,現在我們往這個 todostore 裡新增一些東西,為了明顯起見,就呼叫 todo...