mobx VS redux

开始安利我们的轮子之前, 先来谈一下 mobx 与 redux 这两个数据层的框架.

毫无疑问, 现在是 redux 的天下, 用过 react 的团队大多都在使用 redux, 它是一个将函数式编程引入数据驱动的方案, 框架轻量简单. 但我们更偏爱 mobx. 它的特点就是特别自然:

1. 对象式的数据层, 简单易于理解, 业务入侵非常小.
2. 智能高效的驱动方式, 几乎总是比 redux 快, 甚至快 20 倍以上性能.

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

集成方式:

1. clone或者下载代码库到本地:

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

1. 将 mobx.js 和 observer.js 文件直接拷贝到小程序的工程中,例如 (下面假设我们把第三方包都安装在libs目录下):

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

上面的命令将包拷贝到小程序的`libs`目录下

1. 创建一个 stores 目录, 存放数据层.

如何使用

1. 创建 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. 绑定页面联动事件

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

3. 说明

   完成上述两步之后,你就可以在 wxml 中用 props.todoStore 这种方式来访问了, 并且数据联动已经自动工作.

实际案例 & demo

我们已经在客户产品中使用访框架, 请放心使用它, 发现问题请在 github 上提供 issue. 我们会及时修复.

目前我们有两个产品正在使用它, 待上线后公布给大家体验.