应该如何理解mobx

MobX入门

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

什么是MobX

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

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

State

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

var store = mobx.observable({

counter: 0

})

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

Rendering

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

function render(state) {

document.getElementById('counter').textContent = state.counter;

}

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

Actions

当action发生，我们可以直接改变状态：

Increment

document.getElementById('button').addEventListener('click', function() {

store.counter = store.counter + 1

})

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

改变State

当我们改变状态，我们将更新渲染：

mobx.observe(store, function() {

render(store)

})

最终代码

Increment

// JavaScript

var 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是个不错的选择。

应该如何理解mobx_MobX入门相关推荐

公钥，私钥和数字签名这样理解轻松入门！
公钥,私钥和数字签名这样理解轻松入门! 参考博文:https://blog.csdn.net/21aspnet/article/details/7249401 (公钥和私钥是成对出现的,可以把他们看成 ...
Mybatis理解与入门步骤
一.Mybatis的层次结构位置二.Mybatis,实体类,接口,映射文件的关系三.开发入门步骤准备数据库,创建表结构,添加一些数据创建工程,引入相关依赖编写实体类,和表结构对应,用于数据封 ...
理解SVM ——入门SVM和代码实现
这篇博客我们来理解一下SVM.其实,之前好多大牛的博客已经对SVM做了很好的理论描述.例如CSDN上july的那篇三层境界介绍SVM的博文,连接如下: http://blog.csdn.net/v_j ...
【AC自动机】【数据结构】【树】【Aho-Corasick automation】AC自动机理解（入门）...
引入我们首先提出一个问题: 给出n个串每个串的长度≤m 然后给出一个长度为k的串,询问前n个串中有多少个是匹配成了的暴力搜索这题不是sb题目吗? 随随便便O(kmn)跑过. .... n=100 ...
OSGI概念理解和入门
OSGI在java中也可以说是模块化技术,可以参考这篇博文:https://www.cnblogs.com/garfieldcgf/p/6378443.html 这句话说得很好:构造一个大型程序的主要 ...
GitHub Desktop理解与入门
基本使用创建项目和提交左上角+可以选择本地项目Repository,之后该项目会进入本地GitHub Desktop,如果想上传至GitHub则,则在Summary中填写摘要,Descriptio ...
AE特效的理解从入门到入门
想做ae的可以在哔哩哔哩找国外的ak大神,他的特效好到没话说. 1.导出图片一来就遇到坑,在pr中往往是导出直接可以图片的某种格式导出来,但在ae中导出需要在pr过渡出来,结果到了pr图片的效果没了 ...
数据分析及机器学习环境配置（docker极简入门指南）
做数据科学一般需要用到类似XGBOOST.TensorFlow之类的库,这些库在win下不是那么好安装的,但是很多人又需要它们,那怎么办呢,最简单的就是用docker的方式,不仅具备一个linux虚拟 ...
python零基础怎么学-零基础如何入门Python
零基础学习编程,和学习任何一门实用技能都同样需要经历3个阶段:理解->模仿->应用正如我们在婴儿时期学习说话的时候,最初是看着图片理解文字的含义,然后是模仿父母的发音,逐渐才能学会表达自 ...
python语言怎么学-如何从零开始学习Python，python语言编程入门
Python并不难学,它诞生至今已经过25个年头,但相对于其他语言,它更加易学.易读,非常适合快速开发,Python编程简单直接,更适合初学编程者. 那么,如何从零开始学习python呢? 可以分为这 ...

应该如何理解mobx_MobX入门

应该如何理解mobx_MobX入门相关推荐

最新文章

热门文章