博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MobX入门
阅读量:5910 次
发布时间:2019-06-19

本文共 1329 字,大约阅读时间需要 4 分钟。

本文尝试解释MobX是如何运作的。我们将用MobX创建一个小案例。如果你正在找靠谱的MobX文档,可以去看。

什么是MobX

官方文档的解释:简洁,易扩展的状态管理。简单来说,MobX可以很好的管理应用程序的状态/数据,同时又简洁,易扩展。先来看一张图:

我们通过上图的的步骤来创建一个简单应用。

State

在MobX中你可以设置一个或者多个state,我们先设置一个:

var store = mobx.observable({    counter: 0})复制代码

我们初始化store,只有一个状态数据counter。你的对象可能有多个层级对应多个不同的属性。

Rendering

MobX和react.js一起用效果很好,但是不用react.js也可以。我们用原生JavaScript来把状态渲染到页面:

`
-
`复制代码
function render(state) {    document.getElementById('counter').textContent = state.counter;}复制代码

我们拿到了状态并更新到了页面。

Actions

当action发生,我们可以直接改变状态:

复制代码
document.getElementById('button').addEventListener('click', function() {    store.counter = store.counter + 1})复制代码

当我们点击按钮,state 中的 counter将会加1。

改变State

当我们改变状态,我们将更新渲染:

mobx.observe(store, function() {    render(store)})复制代码

最终代码

// html复制代码
// JavaScriptvar store = mobx.observable({    counter: 0})function render(state) {    document.getElementById('counter').textContent = state.counter;}document.getElementById('button').addEventListener('click', function() {    store.counter = store.counter + 1})mobx.observe(store, function() {    render(store)})复制代码

与Redux比较

比起Redux,MobX不管是写代码还是理解,似乎都要简单很多,而且你不用写很多重复的代码。但是随之而来的代价就是你不知道它内部是如何运作的。MobX也可以写的和Redux一样:用actions,创建action,创建异步action等等,但是不是强制的。总的来说,如果你保持你的代码模块化,可测试以及数据单向流,MobX是个不错的选择。

> 原文:https://bumbu.github.io/simple-mobx/

转载地址:http://havpx.baihongyu.com/

你可能感兴趣的文章
AndroidStudio3.0 Android Profiler分析器(cpu memory network 分析器)(转)
查看>>
LINUX系统下的squid服务
查看>>
Hdu 3887树状数组+模拟栈
查看>>
Mysql之performance Schema
查看>>
在python里安装gensim
查看>>
虚拟机linux上网问题
查看>>
第五十八课、自定义模型类(上)------------------狄泰软件学院
查看>>
线程基础篇Looper
查看>>
二、vertica安装实践
查看>>
sublime 主题
查看>>
BigDecimal数据的加 减 乘 除 N次幂运算 以及比较大小
查看>>
XMLHttpRequest - 原始AJAX初步
查看>>
Python面向对象编程 - 一个记事本程序范例(二)
查看>>
线程同步之监视器及对象锁的
查看>>
cocos2d-x动作原理
查看>>
@angular/cli项目构建--路由1
查看>>
python 编程语言基础技术框架
查看>>
android 之activity生命周期(转载)
查看>>
配置文件操作类
查看>>
SQL Server 执行计划中的扫描方式举例说明
查看>>