点击上方“前端自习课”关注,学习起来~

本文考虑到篇幅问题,将《MobX 入门教程》分成上、下两篇文章,方便阅读。分配安排:

一、MobX 介绍

首先看下官网介绍:

MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
任何源自应用状态的东西都应该自动地获得。
其中包括UI、数据序列化、服务器通讯,等等。

核心重点就是:MobX 通过响应式编程实现简单高效,可扩展的状态管理


React 和 Mobx 关系

React 和 MobX 相辅相成,相互合作。

官网介绍:

React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

Mobx 工作流程

这里先了解下大概整理流程,接下来会结合代码,介绍每一个部分。


2019102303.png

本文概要

本文使用的是 MobX 5 版本,主要将从以下几个方面介绍 MobX 的使用:

  1. 配置 Webpack 的 MobX 开发环境
  2. MobX 常用 API 介绍(主要介绍与可观察数据相关的操作)
  3. MobX 简单实例

二、配置 Webpack 的 MobX 开发环境

  • 安装 webpack 和 babel 依赖包:
  1. cnpm i webpack webpack-cli babel-core babel-preset-env babel-loader -D
  • 安装 MobX 相关依赖包:
  1. cnpm i mobx-react -D
  2. cnpm i babel-plugin-transform-class-properties -
  3. cnpm i babel-plugin-transform-decorators-legacy -
  • webpack.config.js 中添加配置:

注意:transform-decorators-legacy 一定放在第一个。

  1. const path = require('path')
  2. const config = {
  3. mode: 'development',
  4. entry: path.resolve(__dirname, 'src/index.js'),
  5. output: {
  6. path: path.resolve(__dirname, 'dist'),
  7. filename: 'main.js'
  8. },
  9. module: {
  10. rules: [{
  11. test: /\.js$/,
  12. exclude: /node_modules/,
  13. use: {
  14. loader: 'babel-loader',
  15. options: {
  16. presets: ['env'],
  17. plugins: ['transform-decorators-legacy', 'transform-class-properties']
  18. }
  19. }
  20. }]
  21. },
  22. devtool: 'inline-source-map'
  23. }
  24. module.exports = config

三、MobX 常用 API 介绍

1. 设置可观察数据(observable)

1.1 (@)observable

observable 是一种让数据的变化可以被观察的方法,底层是通过把该属性转化成 getter / setter 来实现的。。

observable 值可以是 JS原始数据类型、引用类型、普通对象、类实例、数组和映射。

observable 使用

  • 对于JS原始类型Number/String/Boolean), 使用observable.box()方法设置:
  1. const num = observable.box(99)
  2. const str = observable.box('leo')
  3. const bool = observable.box(true)
  4. // 获取原始值 get()
  5. console.log(num.get(),str.get(),bool.get()) // 99 "leo" true
  6. // 修改原始值 set(params)
  7. num.set(100);
  8. str.set('pingan');
  9. bool.set(false);
  10. console.log(num.get(),str.get(),bool.get()) // 100 "pingan" false
  • 对于数组对象类型,使用 observable() 方法设置:
  1. const list = observable([1, 2, 4]);
  2. list[2] = 3;
  3. list.push(5) // 可以调用数组方法
  4. console.log(list[0], list[1], list[2], list[3]) // 1 2 3 5
  5. const obj = observable({a: '11', b: '22'})
  6. console.log(obj.a, obj.b) // 11 22
  7. obj.a = "leo";
  8. console.log(obj.a, obj.b) // leo 22

需要注意的是:应该避免下标越界去方法数组中的值,这样的数据将不会被 MobX 所监视:

  1. const list = observable([1, 2, 4]);
  2. // 错误
  3. console.log(list[9]) // undefined

因此在实际开发中,需要注意数组长度的判断。

  • 对于映射(Map)类型,使用 observable.map() 方法设置:
  1. const map = observable.map({ key: "value"});
  2. map.set("key", "new value");
  3. console.log(map.has('key')) // true
  4. map.delete("key");
  5. console.log(map.has('key')) // false

@observable 使用

MobX 也提供使用装饰器 @observable 来将其转换成可观察的,可以使用在实例的字段和属性上。

  1. import {observable} from "mobx";
  2. class Leo {
  3. @observable arr = [1];
  4. @observable obj = {};
  5. @observable map = new Map();
  6. @observable str = 'leo';
  7. @observable num = 100;
  8. @observable bool = false;
  9. }
  10. let leo = new Leo()
  11. console.log(leo.arr[0]) // 1

相比于前面使用 observable.box()方法对JS原始类型Number/String/Boolean)进行定义,装饰器 @observable 则可以直接定义这些类型。

原因是装饰器 @observable 更进一步封装了 observable.box()

2. 响应可观察数据的变化

2.1 (@)computed

计算值(computed values)是可以根据现有的状态或其它计算值进行组合计算的值。可以使实际可修改的状态尽可能的小。

此外计算值还是高度优化过的,所以尽可能的多使用它们。

可以简单理解为:它是相关状态变化时自动更新的值,可以将多个可观察数据合并成一个可观察数据,并且只有在被使用时才会自动更新

知识点:使用方式

  • 使用方式1:声明式创建
  1. import {observable, computed} from "mobx";
  2. class Money {
  3. @observable price = 0;
  4. @observable amount = 2;
  5. constructor(price = 1) {
  6. this.price = price;
  7. }
  8. @computed get total() {
  9. return this.price * this.amount;
  10. }
  11. }
  12. let m = new Money()
  13. console.log(m.total) // 2
  14. m.price = 10;
  15. console.log(m.total) // 20
  • 使用方式2:使用 decorate 引入
  1. import {decorate, observable, computed} from "mobx";
  2. class Money {
  3. price = 0;
  4. amount = 2;
  5. constructor(price = 1) {
  6. this.price = price;
  7. }
  8. get total() {
  9. return this.price * this.amount;
  10. }
  11. }
  12. decorate(Money, {
  13. price: observable,
  14. amount: observable,
  15. total: computed
  16. })
  17. let m = new Money()
  18. console.log(m.total) // 2
  19. m.price = 10;
  20. console.log(m.total) // 20
  • 使用方式3:使用 observable.object 创建

observable.objectextendObservable 都会自动将 getter 属性推导成计算属性,所以下面这样就足够了:

  1. import {observable} from "mobx";
  2. const Money = observable.object({
  3. price: 0,
  4. amount: 1,
  5. get total() {
  6. return this.price * this.amount
  7. }
  8. })
  9. console.log(Money.total) // 0
  10. Money.price = 10;
  11. console.log(Money.total) // 10
  • 注意点

如果任何影响计算值的值发生变化了,计算值将根据状态自动进行变化。

如果前一个计算中使用的数据没有更改,计算属性将不会重新运行。 如果某个其它计算属性或 reaction 未使用该计算属性,也不会重新运行。 在这种情况下,它将被暂停。

知识点:computed 的 setter

computedsetter 不能用来改变计算属性的值,而是用来它里面的成员,来使得 computed 发生变化。

这里我们使用 computed 的第一种声明方式为例,其他几种方式实现起来类似:

  1. import {observable, computed} from "mobx";
  2. class Money {
  3. @observable price = 0;
  4. @observable amount = 2;
  5. constructor(price = 1) {
  6. this.price = price;
  7. }
  8. @computed get total() {
  9. return this.price * this.amount;
  10. }
  11. set total(n){
  12. this.price = n + 1
  13. }
  14. }
  15. let m = new Money()
  16. console.log(m.total) // 2
  17. m.price = 10;
  18. console.log(m.total) // 20
  19. m.total = 6;
  20. console.log(m.total) // 14

从上面实现方式可以看出,set total 方法中接收一个参数 n 作为 price 的新值,我们调用 m.total 后设置了新的 price,于是 m.total 的值也随之发生改变。

注意:

知识点:computed(expression) 函数

一般可以通过下面两种方法观察变化,并获取计算值:

  • 方法1: 将 computed 作为函数调用,在返回的对象使用 .get() 来获取计算的当前值。
  • 方法2: 使用 observe(callback) 来观察值的改变,其计算后的值在 .newValue 上。
  1. import {observable, computed} from "mobx";
  2. let leo = observable.box('hello');
  3. let upperCaseName = computed(() => leo.get().toUpperCase())
  4. let disposer = upperCaseName.observe(change => console.log(change.newValue))
  5. leo.set('pingan')

更详细的 computed 参数可以查看文档:《Computed 选项》。

知识点:错误处理

计算值在计算期间抛出异常,则此异常会被捕获,并在读取其值的时候抛出异常

抛出异常不会中断跟踪,所有计算值可以从异常中恢复。

  1. import {observable, computed} from "mobx";
  2. let x = observable.box(10)
  3. let y = observable.box(2)
  4. let div = computed(() => {
  5. if(y.get() === 0) throw new Error('y 为0了')
  6. return x.get() / y.get()
  7. })
  8. div.get() // 5
  9. y.set(0) // ok
  10. div.get() // 报错,y 为0了
  11. y.set(5)
  12. div.get() // 恢复正常,返回 2

小结

用法:

  • computed(() => expression)
  • computed(() => expression, (newValue) => void)
  • computed(() => expression, options)
  • @computed({equals: compareFn}) get classProperty() { return expression; }
  • @computed get classProperty() { return expression; }

还有各种选项可以控制 computed 的行为。包括:

  • equals: (value, value) => boolean 用来重载默认检测规则的比较函数。 内置比较器有: comparer.identity, comparer.default, comparer.structural
  • requiresReaction: boolean 在重新计算衍生属性之前,等待追踪的 observables 值发生变化;
  • get: () => value) 重载计算属性的 getter
  • set: (value) => void 重载计算属性的 setter
  • keepAlive: boolean 设置为 true 以自动保持计算值活动,而不是在没有观察者时暂停;

2.2 autorun

概念

autorun 直译就是自动运行的意思,那么我们要知道这两个问题:

  • 自动运行什么?

即:自动运行传入 autorun 的参数函数。

  1. import { observable, autorun } from 'mobx'
  2. class Store {
  3. @observable str = 'leo';
  4. @observable num = 123;
  5. }
  6. let store = new Store()
  7. autorun(() => {
  8. console.log(`${store.str}--${store.num}`)
  9. })
  10. // leo--123

可以看出 autorun 自动被运行一次,并输出 leo--123 的值,显然这还不是自动运行。

  • 怎么触发自动运行?

当修改 autorun 中任意一个可观察数据即可触发自动运行。

  1. // 紧接上部分代码
  2. store.str = 'pingan'
  3. // leo--123
  4. // pingan--123

现在可以看到控制台输出这两个日志,证明 autorun 已经被执行两次。

知识点:观察 computed 的数据

  1. import { observable, autorun } from 'mobx'
  2. class Store {
  3. @observable str = 'leo';
  4. @observable num = 123;
  5. @computed get all(){
  6. return `${store.str}--${store.num}`
  7. }
  8. }
  9. let store = new Store()
  10. autorun(() => {
  11. console.log(store.all)
  12. })
  13. store.str = 'pingan'
  14. // leo--123
  15. // pingan--123

可以看出,这样将 computed 的值在 autorun 中进行观察,也是可以达到一样的效果,这也是我们实际开发中常用到的。

知识点:computed 与 autorun 区别

相同点:

都是响应式调用的表达式;

不同点:

  • @computed 用于响应式的产生一个可以被其他 observer 使用的
  • autorun 不产生新的值,而是达到一个效果(如:打印日志,发起网络请求等命令式的副作用);
  • @computed中,如果一个计算值不再被观察了,MobX 可以自动地将其垃圾回收,而 autorun 中的值必须要手动清理才行。

小结

autorun 默认会执行一次,以获取哪些可观察数据被引用。

autorun 的作用是在可观察数据被修改之后自动去执行依赖可观察数据的行为,这个行为一直就是传入 autorun 的函数。

2.3 when

接收两个函数参数,第一个函数必须根据可观察数据来返回一个布尔值,当该布尔值为 true 时,才会去执行第二个函数,并且只会执行一次。

  1. import { observable, when } from 'mobx'
  2. class Leo {
  3. @observable str = 'leo';
  4. @observable num = 123;
  5. @observable bool = false;
  6. }
  7. let leo = new Leo()
  8. when(() => leo.bool, () => {
  9. console.log('这是true')
  10. })
  11. leo.bool = true
  12. // 这是true

可以看出当 leo.bool 设置成 true 以后,when 的第二个方法便执行了。

注意

  1. 第一个参数,必须是根据可观察数据来返回的布尔值,而不是普通变量的布尔值。

  2. 如果第一个参数默认值为 true,则 when 函数会默认执行一次。

2.4 reaction

接收两个函数参数,第一个函数引用可观察数据,并返回一个可观察数据,作为第二个函数的参数。

reaction 第一次渲染的时候,会先执行一次第一个函数,这样 MobX 就会知道哪些可观察数据被引用了。随后在这些数据被修改的时候,执行第二个函数。

  1. import { observable, reaction } from 'mobx'
  2. class Leo {
  3. @observable str = 'leo';
  4. @observable num = 123;
  5. @observable bool = false;
  6. }
  7. let leo = new Leo()
  8. reaction(() => [leo.str, leo.num], arr => {
  9. console.log(arr)
  10. })
  11. leo.str = 'pingan'
  12. leo.num = 122
  13. // ["pingan", 122]
  14. // ["pingan", 122]

这里我们依次修改 leo.strleo.num 两个变量,会发现 reaction 方法被执行两次,在控制台输出两次结果 ["pingan", 122] ,因为可观察数据 strnum 分别被修改了一次。

实际使用场景:

当我们没有获取到数据的时候,没有必要去执行存缓存逻辑,当第一次获取到数据以后,就执行存缓存的逻辑。

2.5 小结

  • computed 可以将多个可观察数据组合成一个可观察数据;

  • autorun 可以自动追踪所引用的可观察数据,并在数据发生变化时自动触发;

  • when 可以设置自动触发变化的时机,是 autorun 的一个变种情况;

  • reaction 可以通过分离可观察数据声明,以副作用的方式对 autorun 做出改进;

它们各有特点,互为补充,都能在合适场景中发挥重要作用。



原创系列推荐



4. 
5. 
6. 
7. 

回复“加群”与大佬们一起交流学习~

点这,与大家一起分享本文吧~

【MobX】390- MobX 入门教程(上)的更多相关文章

  1. 【MobX】391- MobX 入门教程(下)

    点击上方"前端自习课"关注,学习起来~ 三.MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数 ...

  2. django入门教程(上)

    相信用过python的人都听过Django的大名,知道它是一个web框架,用来支持动态网站.网络应用程序以及网络服务的开发.那么为什么我们需要一个web框架,而不是直接用python来写web应用呢? ...

  3. jenkins 入门教程(上)

    jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署.jenkins可以很好的支持各种语言(比如:java, ...

  4. Odoo进销存(采购、销售、仓库)入门教程 - 上

    转载地址:http://blog.csdn.net/wangnan537/article/details/46434373 运行环境: Ubuntu14.04+Odoo8.0 作者:苏州-微尘 0. ...

  5. jenkins 入门教程(上)【转】

    转自:https://www.cnblogs.com/yjmyzz/p/jenkins-tutorial-part-1.html jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更 ...

  6. 转:Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)

    Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...

  7. Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)

    Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...

  8. .NET Core快速入门教程 2、我的第一个.NET Core App(Windows篇)

    一.前言 本篇开发环境?1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core下载地址 ...

  9. .NET Core快速入门教程 5、使用VS Code进行C#代码调试的技巧

    一.前言 为什么要调试代码?通过调试可以让我们了解代码运行过程中的代码执行信息,比如变量的值等等.通常调试代码是为了方便我们发现代码中的bug.ken.io觉得熟练代码调试技巧是成为合格程序员的基本要 ...

随机推荐

  1. java编程思想第四版第七章总结

    1. 实现类的复用通常有两种方式 组合:在新的类中产生现有类的对象 继承:按照现有类的类型来创造新类 2. 一个特殊的方法toString() 在非基本类型的对象中, 都有toString()方法 当 ...

  2. 学习记录:《C++设计模式——李建忠主讲》2.面向对象设计原则

    1.课程内容: 重新认识面向对象:面向对象设计原则: 2.重新认识面向对象 1)理解隔离变化:从宏观层面来看,面向对象的构建方式更能适应软件的变化,将变化所带来的影响减为最小: 2)各司其职:从微观层 ...

  3. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  4. React-Hook

    import React, { useState } from 'react'; // Hook 写法 function App2 () { const [count,setCount] = useS ...

  5. Swoft源码之Swoole和Swoft的分析

    这篇文章给大家分享的内容是关于Swoft 源码剖析之Swoole和Swoft的一些介绍(Task投递/定时任务篇),有一定的参考价值,有需要的朋友可以参考一下. 前言 Swoft的任务功能基于Swoo ...

  6. 程序员需要掌握的七种 Python 代码更易维护的武器

    检查你的代码风格 PEP 8 是 Python 代码风格规范,它规定了类似行长度.缩进.多行表达式.变量命名约定等内容.尽管你的团队自身可能也会有稍微不同于 PEP 8 的代码风格规范,但任何代码风格 ...

  7. PowerMock学习(六)之Mock Final的使用

    Mock Final mockfinal相对来说就比较简单了,使用powermock来测试使用final修饰的method或class,比较简单,接口调用部分,还是service调用dao. 对于接口 ...

  8. 2019-11-7:练习上传getshell,通过菜刀连接

    一.使用phtstudy搭建环境 1,将emlog源码解压到phpstudy的www目录,复制emlog源码中的src所有文件到需要搭建emlog的目录中,修改emlog配置文件,输入好本机mysql ...

  9. C#学习笔记05--枚举/结构体

    一.枚举   当变量的取值范围是固定的几个时, 就可以使用枚举类型, 这样会更加简洁方便   1.1.定义: 访问修饰符 enum 枚举类型名 { 成员1, 成员2, 成员3, ... } publi ...

  10. js对象的直接赋值、浅拷贝与深拷贝

    最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...