mobx VS redux

開始安利我們的輪子之前, 先來談一下 mobx 與 redux 這兩個數(shù)據(jù)層的框架.

毫無疑問, 現(xiàn)在是 redux 的天下, 用過 react 的團隊大多都在使用 redux, 它是一個將函數(shù)式編程引入數(shù)據(jù)驅(qū)動的方案, 框架輕量簡單. 但我們更偏愛 mobx. 它的特點就是特別自然:

1. 對象式的數(shù)據(jù)層, 簡單易于理解, 業(yè)務(wù)入侵非常小.
2. 智能高效的驅(qū)動方式, 幾乎總是比 redux 快, 甚至快 20 倍以上性能.

如何在小程序中集成 wechat-weapp-mobx

集成方式:

1. clone或者下載代碼庫到本地:

git clone https://github.com/80percent/wechat-weapp-mbox

1. 將 mobx.js 和 observer.js 文件直接拷貝到小程序的工程中,例如 (下面假設(shè)我們把第三方包都安裝在libs目錄下):

cd wechat-weapp-mobx
    cp mobx.js <小程序根目錄>/libs
    cp observer.js <小程序根目錄>/libs

上面的命令將包拷貝到小程序的`libs`目錄下

1. 創(chuàng)建一個 stores 目錄, 存放數(shù)據(jù)層.

如何使用

1. 創(chuàng)建 mobx 的 stores

   var extendObservable = require('../libs/mobx').extendObservable;
     var TodoStore = function() {
       extendObservable(this, {
         // observable data
         todos: [],
         todoText: 'aaa',
         // computed data
         get count() {
           return this.todos.length;
         }
       });
   
       // action
       this.addTodo = function(title) {
         this.todos.push( {title: title} );
       }
   
       this.removeTodo = function() {
         this.todos.pop();
       }
     }
   
     module.exports = {
       default: new TodoStore,
     }

2. 綁定頁面聯(lián)動事件

   var observer = require('../libs/observer').observer;
   Page(observer({
     props: {
       todoStore: require('../stores/todoStore').default,
     },
     // your other code below
     onLoad: function(){
     }
   }))

3. 說明

   完成上述兩步之后,你就可以在 wxml 中用 props.todoStore 這種方式來訪問了, 并且數(shù)據(jù)聯(lián)動已經(jīng)自動工作.

實際案例 & demo

我們已經(jīng)在客戶產(chǎn)品中使用訪框架, 請放心使用它, 發(fā)現(xiàn)問題請在 github 上提供 issue. 我們會及時修復.

目前我們有兩個產(chǎn)品正在使用它, 待上線后公布給大家體驗.