Using mobx to Saving Your Life...

在開發(fā)中大型應(yīng)用的時候,與 React 配合使用的數(shù)據(jù)狀態(tài)管理庫除了有 Redux, 我們還有了新選擇 -- Mobx, Mobx 是一款提供函數(shù)響應(yīng)式編程的數(shù)據(jù)狀態(tài)管理庫, 相比于 Redux 的復(fù)雜而沉重, 它有著更簡單的接口與更少的概念, 只需較少的代碼, 即可把數(shù)據(jù)有效管理起來.

核心思想:

使用觀察者模式監(jiān)控數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)變化時，自動更新/渲染視圖

原理:

建立數(shù)據(jù)倉庫(store)與頁面(view)之間的綁定關(guān)系:

store ---> subscribe ---> view

當(dāng)數(shù)據(jù)變化時, 自動根據(jù)新數(shù)據(jù)重新渲染頁面(re-render)

subscribe(store) ---> exchange-info ---> re-render(view)

核心概念:

• observable

定義: 字面意義上理解是可觀察的，代表被觀察的數(shù)據(jù)源，通過這個方法，將我們的數(shù)據(jù)源包裹，返回一個可以由 mobx 自動監(jiān)測的數(shù)據(jù)源對象

import { observable } from 'mobx';class DataSource {@observable num = 0; }export default DataSource; 復(fù)制代碼

在這里我們做了兩件事情: 引入 observable 這個方法 定義 DataSource 類,通過 observable 將 DataSource 的 num 屬性包裝成被觀測的數(shù)據(jù)源

• observer

定義: 字面含義是 觀察者, 用來監(jiān)測數(shù)據(jù)源變化，當(dāng)使用 observer 訂閱數(shù)據(jù)源后，會根據(jù)數(shù)據(jù)源的變化來自動渲染新視圖

import React from 'react'; import { observer } from 'mobx-react'; import DataSource from './DataSource'; // 1.引入數(shù)據(jù)源的類 const dataStore = new DataSource(); // 2.實例化數(shù)據(jù)倉庫 (data store)@observer // 3.使用裝飾器包裝后面的App類,使其可以使用data store里的數(shù)據(jù) export default class App extends React.Component {render() {return (<div>{ dataStore.num }</div> // 4.通過 @observer 包裹后的組件監(jiān)測 dataStore 中的 num 數(shù)據(jù));} } 復(fù)制代碼

在這里通過 @observer 把 App 組件改造成了觀察者，并觀測實例化的數(shù)據(jù)對象后，我們就輕松很多了，因為 mobx 會在 dataStore 中的 num 變化時 自動重新渲染視圖, 那如何做到手動改動數(shù)據(jù)，或是做異步請求來改變數(shù)據(jù)呢?

• action

定義: 使用 action (動作) 來定義數(shù)據(jù)倉庫中改變數(shù)據(jù)源的方法 那我們就把 observable 中的例子改成這個樣子:

import { observable, action } from 'mobx'; class DataSource {@observable num = 0;@action add = () => { // 使用 @action 裝飾 add 這個方法, 當(dāng)我們調(diào)用 add 的時候this.num++; // DataSource 中的 num 值就會自增1了} } export default DataSource; 復(fù)制代碼

然后, 把 observer 中的例子改成這個樣子:

import React from 'react'; import { observer } from 'mobx-react'; import DataSource from './DataSource'; // 1.引入數(shù)據(jù)源的類 const dataStore = new DataSource(); // 2.實例化數(shù)據(jù)源 (data store)@observer // 3.使用裝飾器包裝 App 組件, 使其可以使用 dataStore 中的數(shù)據(jù) export default class App extends React.Component {render() {return (<div>{ dataStore.num }</div> // 4. 綁定 num 數(shù)據(jù)<button onClick={ dataStore.add }></button> // 5. 綁定 add 方法); } } 復(fù)制代碼

在視圖中綁定這個方法后, 當(dāng)我們點擊的時, 就能觸發(fā) dataStore 的數(shù)據(jù)變化了 但是業(yè)務(wù)中經(jīng)常用的 異步請求呢，怎么寫?

import axios from 'axios'; // 1. 引入 http 庫 @action requestData = async() => { // 2. 使用 @action 包裝異步函數(shù)const data = await axios.request({ method: 'GET',url: 'https://www.baidu.com'});this.num = data; }view層 加一個button <button onClick={ dataStore.requestData }></button> // 3. 添加 requestData 方法 復(fù)制代碼

加上 requestData 方法后，點擊按鈕，神奇的事情出現(xiàn)了，視圖中的數(shù)字自動變化成了我們請求回來的結(jié)果!!

What's the diffenrece? 相比于 Redux 從 View -> Mutation -> Action -> Reducer -> Store 的鏈路, Mobx 只需要從 @observer 到 @observable, 在節(jié)省大量開發(fā) Mutation/Action/Reducer 的代碼的同時, 也減少了出錯的機率與調(diào)試的成本. 即然 redux 能做的 mobx 也能做，同時還能節(jié)省開發(fā)成本，何樂而不為呢，快來體驗一下化繁為簡的快樂吧.

Mobx, 化繁為簡的藝術(shù), 愉快的初次體驗

轉(zhuǎn)載于:https://juejin.im/post/5cf3f771518825558314fd1f

總結(jié)

以上是生活随笔為你收集整理的Mobx, 化繁为简的艺术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。