mobx是一个简单可扩展的状态管理库,主要用来管理状态之间的依赖关系,可以使用在任何状态管理的场景,并不仅限于react。
结合mobx-react可以用在react中,结合mobx-vue可以用在vue中。mobx的概念与knockout和rxjs中的概念极其相似,
相当于将kouckout中的状态管理部分独立出来了。
 
mobx的基本流程如下图:
1. mobx的基本概念
state 应用的数据,包括领域状态和视图状态
observable 可观察者,可以被观察者观察的数据
observer 观察者,可以观察可观察者的对象,可以接收到可观察者发生变化时候发出的消息,并且根据变化做出响应
observer本身是一个函数,也可以以装饰器的身份出现,将其包装过的对象变成一个观察者
derivations 衍生,状态变化引起的副作用,如一个值的变化或者触发一个行为
computed 衍生值,状态发生变化,引起依赖于原始状态的计算状态发生变化,本质是一个函数,关注其返回值,computed中不能再次修改状态
reactions 衍生行为,状态发生变化,引发某些行为,如IO操作,日志记录等,本质是一个函数调用
action 修改状态的函数,本质是一个高阶函数,修改状态可以是不经过action的,但是mobx建议所有状态的修改尽量在action中,在严格模式下,mobx限制只能在action中修改状态
2. reactions的几种类型
autorun: 本质是一个高阶函数,autorun如其名,首次观察状态立即被触发一次,状态变化会再次被触发
autorunAsync: 可以在状态发生改变一定时间后触发,有函数防抖的功能,其他与autorun一致
when: 可以设置断言,当断言生效时候函数被触发,并且仅仅触发一次
reaction: 与autorun类似,函数不会立即执行
3. mobx的最佳实践
1.reactions一定要命名,不要使用匿名的,有利于在报错时候显示准确的信息
2.状态修改一定要做action中来做,利于追踪状态变化
3.开启严格模式,规范写法
4.使用装饰器写法,简洁明了
5.使用多个store
使用多个 store对观测数据进行逻辑分组。
一个用于 UI 状态
一个或多个用于领域状态
 
参考:https://segmentfault.com/a/1190000015408976

mobx基本概念的更多相关文章

  1. [Web 前端] mobx教程(二)-mobx主要概念

    cp from : https://blog.csdn.net/smk108/article/details/84960159 通过<Mobx教程(一)-Mobx简介>我们简单理解了Mob ...

  2. 状态管理之 Flux、Redux、Vuex、MobX(概念篇)

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...

  3. React使用Mobx管理数据

    React 和 Vue一样都属于单向数据流,为了更好的进行状态和数据管理官方和第三方也有配套的Redux等插件,本文介绍一个个人觉得更易用使用的组件 Mobx 核心概念 MobX 处理你的应用程序状态 ...

  4. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

  5. [web 前端] mobx教程(一)-mobx简介

    opy from : https://blog.csdn.net/smk108/article/details/84777649 Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库.M ...

  6. MobX快速入门教程(重要概念讲解)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7372119.html 一:Mobx工作流程图 二:MobX涉及到的概念 1:状态state 组件中的数据. 2 ...

  7. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  8. Mobx使用详解

    Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. 本教程旨在介绍其用法及概念,并重点介绍其与Reac ...

  9. MobX基础 ----- 类的静态属性和装饰器

    当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...

随机推荐

  1. Laravel-初步使用

    一.Laravel环境搭建 1.window环境下环境搭建请参考以下链接: 开发环境搭建 - Windows | <Laravel 开发环境部署> | PHP / Laravel 社区文档 ...

  2. 码云配置webhooks自动触发拉取代码

    webhooks的使用 码云和github的钩子叫webhooks 每次您 push 代码后,都会给远程 HTTP URL 发送一个 POST 请求 码云项目管理页面的webhooks设置: http ...

  3. R语言学习笔记(八):零碎知识点(16-20)

    16--complete.cases( ) complete.case()可以判断对象中是否数据完全,然后返回TRUE, FALSE 这一函数在去除数据框中缺失值时很有用. > d kids a ...

  4. Android log 里面快速搜索错误堆栈 ( 关键字)

    有时候,别人给你的log 文件,是一个文件夹,里面放了很多文件.但是可能你需要的log 只有几行.这时候不可能手工搜索的. 那怎么办呢?使用FileLocationPro.下载地址: https:// ...

  5. vTaskDelete(NULL)使用注意事项

    在实际开发过程中,记录犯过的一个错误,如下 vTaskDelete(NULL); iccid_return_num = ; 错误原因分析,在任务删除之后(调用vTaskDelete(NULL)之后), ...

  6. 了解url

    我对自己知道关于url的编码和解码的一些进行了一下整理. 我们的例子是百度翻译的地址: http://fanyi.baidu.com/translate#en/zh/The%20%22%3F%20ar ...

  7. Qt Qwdget 汽车仪表知识点拆解3 进度条编写

    先贴上效果图,注意,没有写逻辑,都是乱动的 这篇我来说说左侧的这个进度条的实现原理,其实更简单,哈哈哈 有一个大的widget,根据素材,我放了10个label 剩下的就是写一个函数,根据数据的不同, ...

  8. LuffyCity-CMDB实战

    第1章 章节一 课时01-ITIL介绍 课时02-CMDB介绍 课时03-CMDB需求讨论 课时04-CMDB需求讨论2 课时05-CMDB表结构设计 课时06-CMDB表结构设计2 课时07-CMD ...

  9. django中判断当前user具有是否有对模块的增删改查权限

    首先简单了解一下user的一些属性 User对象 User对象是认证系统的核心.用户对象通常用来代表网站的用户,并支持例如访问控制.注册用户.关联创建者和内容等.在Django认证框架中只有一个用户类 ...

  10. python学习总结----异常处理

    相关概念 - 错误:程序运行之前的语法错误,如:关键字.缩进不齐.括号不成对. - 异常:在程序运行过程中出现的问题,如:除数为0.对象属性不存在等. 异常处理 - 说明:异常处理可以理解为特殊的流程 ...