首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用MobX管理状态(ES5实例描述)-1.核心概念和基本流程

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

作者头像
江米小枣
发布2020-06-15 14:59:33
4670
发布2020-06-15 14:59:33
举报
文章被收录于专栏:云前端云前端

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 一个计数器的例子

<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>
.nagetive {
   color: red;
}
$(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();
});});

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-03-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • [I]. 核心概念和基本流程
    • 1.1 一个计数器的例子
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档