用MobX管理状态(ES5实例描述)-1.核心概念和基本流程

MobX是一个简单有效的状态管理库，以派生(derive)的概念为核心，以观察者模式为手段，达到了修改数据自动更新界面等目的

正因为其本身提供了包装react的方法，可以简洁的改善react组件，所以官网文档和几乎所有教程都以react和ES7的装饰修饰符等特性为切入点
但MobX在传统的ES5环境中也能良好工作，本文尝试以此为出发点，探讨在既有的非react项目中直接引入MobX并用其整理重构老代码的方法

没有babel、webpack、JSX...那么多的套路！直接上手先，走你~

[I]. 核心概念和基本流程

名称	作用
状态	用来驱动应用的数据
派生	从核心数据中引发的数据或动作，比如下面提到的computed和reaction
observable	可被观察的核心数据
action	用来改变状态的方法，且只有此处可以更改状态
computed	由核心数据或其他computed数据改变而派生出来的值，比如数组的长度
reaction	和computed类似，由数据改变派生出的观察者方法，自动执行如修改UI界面或请求网络等“有副作用”的任务，一般由autorun(reactionFn)指定

1.1 一个计数器的例子

代码语言：javascript复制

<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script><div id="counter">
   <button class="dec">-</button>
   <span></span>
   <button class="inc"> </button>
</div>

代码语言：javascript复制

.nagetive {
   color: red;
}

代码语言：javascript复制

$(document).ready(function(){//严格限制只能在action中改变数据
mobx.useStrict(true);//界面元素引用
var
   $ct = $('#counter')
   ,$btn_inc = $ct.find('.inc')
   ,$btn_dec = $ct.find('.dec')
   ,$num = $ct.find('span')
;/**
* step1: 定义一个被观察的状态
*/var appState = mobx.observable({
   //可观察的数据
   count: 0,
   //派生数据
   get style() {
       return this.count>0 ? '' : 'nagetive';
   },
   //action
   increment: mobx.action(function() {
       this.count  ;
   }),
   //action
   decrement: mobx.action(function() {
       this.count--;
   })
});/**
* step2: 指定界面如何响应状态改变
*///reaction
function render() {
   $num.html(appState.count);
   $num.get(0).className = appState.style;
}
mobx.autorun(render);/**
* step3: 改变状态
*/$btn_inc.on('click', function() {
   appState.increment();
});
$btn_dec.on('click', function() {
   appState.decrement();
});});

* 原创文章转载请注明出处

react mobx ecmascript

0 人点赞