MobX 上手指南

巴拉米 等级 736 1 0
标签: https前端

之前用 Redux 比较多,一直听说 Mobx 能让你体验到在 React 里面写 Vue 的感觉,今天打算尝试下 Mobx 是不是真的有写 Vue 的感觉。

题外话

在介绍 MobX 的用法之前,先说点题外话,我们可以看一下 MobX 的中文简介。在 MobX 的中文网站上写着:

MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程使得状态管理变得简单和可扩展。

MobX 上手指南

“战火洗礼的库” 怎么看都感觉很奇怪,读起来很拗口😂,而且网上很多介绍 MobX 的文章都是这么写的,在 github 翻阅其 README 发现写的是:

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).

可以看到作者原本要表达的意思是 MobX 是经过了许多的测试,拥有比较强的健壮性。下面是通过谷歌翻译的结果,看起来也比中文网的表达要准确一些。

MobX 上手指南

虽然,我的英文水平也很菜,还是会尽量看官方的文档,这样可以避免一些不必要的误解。

如何使用?

言归正传,MobX 现在的最新版是 6.0,这个版本的 API 相比于之前有了极大的简化,可以说更加好用了。之前的版本是装饰器风格的语法糖,但是装饰器在现在的 ES 规范中并不成熟,而且引入装饰器语法也在增加打包后的代码体积。综合考虑后,MobX 6.0 取消了装饰器语法的 API。

响应式对象

MobX 通过 makeObservable 方法来构造响应式对象,传入的对象属性会通过 Proxy 代理,与 Vue 类似,在 6.0 版本之前使用的是 Object.defineProperty API,当然 6.0 也提供了降级方案。

import { configure, makeObservable, observable, action, computed } from 'mobx'

// 使用该配置,可以将 Proxy 降级为 Object.defineProperty
configure({ useProxies: "never" });

// 构造响应对象
const store = makeObservable(
  // 需要代理的响应对象
  {
    count: 0,
    get double() {
      return this.count * 2
    },
    increment() {
      this.count += 1
    },
    decrement() {
      this.count -= 1
    }
  },
  // 对各个属性进行包装,用于标记该属性的作用
  {
    count: observable, // 需要跟踪的响应属性
    double: computed,  // 计算属性
    increment: action, // action 调用后,会修改响应对象
    decrement: action, // action 调用后,会修改响应对象
  }
)

我们在看看之前版本的 MobX,使用装饰器的写法:

class Store {
  @observable count = 0
  constructor() {
    makeObservable(this)
  }
  @action increment() {
    this.count++;
  }
  @action decrement() {
    this.count--;
  }
  @computed get double() {
    return this.count * 2
  }
}

const store = new Store()

这么看起来,好像写法并没有得到什么简化,好像比写装饰器还要复杂点。下面我们看看 6.0 版本一个更强大的 API:makeAutoObservable

makeAutoObservable 是一个更强大的 makeObservable,可以自动为属性加上对象的包装函数,上手成本直线下降。

import { makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  get double() {
    return this.count * 2
  },
  increment() {
    this.count += 1
  },
  decrement() {
    this.count -= 1
  }
})

计算属性

MobX 的属性与 Vue 的 computed 一样,在 makeAutoObservable 中就是一个 gettergetter 依赖的值一旦发生变化,getter 本身的返回值也会跟随变化。

import { makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  get double() {
    return this.count * 2
  }
})

store.count 为 1 时,调用 store.double 会返回 2。

修改行为

当我们需要修改 store 上的响应属性时,我们可以通过直接重新赋值的方式修改,但是这样会得到 MobX 的警告⚠️。

const store = makeAutoObservable({
  count: 0
});

document.getElementById("increment").onclick = function () {
  store.count += 1
}

MobX 上手指南

MobX 会提示,在修改响应式对象的属性时,需要通过 action 的方式修改。虽然直接修改也能生效,但是这样会让 MobX 状态的管理比较混乱,而且将状态修改放到 action 中,能够让 MobX 在内部的事务流程中进行修改,以免拿到的某个属性还处于中间态,最后计算的结果不够准确。

makeAutoObservable 中的所有方法都会被处理成 action。

import { makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  get double() {
    return this.count * 2
  },
  increment() { // action
    this.count += 1
  },
  decrement() { // action
    this.count -= 1
  }
})

不同于 Vuex,将状态的修改划分为 mutation 和 action,同步修改放到 mutation 中,异步的操作放到 action 中。在 MobX 中,不管是同步还是异步操作,都可以放到 action 中,只是异步操作在修改属性时,需要将赋值操作放到 runInAction 中。

import { runInAction, makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  async initCount() {
    // 模拟获取远程的数据
    const count = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(10)
      }, 500)
    })
    // 获取数据后,将赋值操作放到 runInAction 中
    runInAction(() => {
      this.count = count
    })
  }
})

store.initCount()

如果不调用 runInAction ,则可以直接调用本身已经存在的 action。

import { runInAction, makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  setCount(count) {
    this.count = count
  },
  async initCount() {
    // 模拟获取远程的数据
    const count = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(10)
      }, 500)
    })
    // 获取数据后,调用已有的 action
    this.setCount(count)
  }
})

store.initCount()

监听对象变更

无论是在 React 还是在小程序中想要引入 MobX,都需要在对象变更的时候,通知调用原生的 setState/setData 方法,将状态同步到视图上。

通过 autorun 方法可以实现这个能力,我们可以把 autorun 理解为 React Hooks 中的 useEffect。每当 store 的响应属性发生修改时,传入 autorun 的方法(effect)就会被调用一次。

import { autorun, makeAutoObservable } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  setCount(count) {
    this.count = count
  },
  increment() {
    this.count++
  },
  decrement() {
    this.count--
  }
})

document.getElementById("increment").onclick = function () {
  store.count++
}

const $count = document.getElementById("count")
$count.innerText = `${store.count}`
autorun(() => {
  $count.innerText = `${store.count}`
})

每当 button#increment 按钮被点击的时候,span#count 内的值就会自动进行同步。👉查看完整代码

MobX 上手指南

除了 autorun ,MobX 还提供了更精细化的监听方法:reactionwhen

const store = makeAutoObservable({
  count: 0,
  setCount(count) {
    this.count = count
  },
  increment() {
    this.count++
  },
  decrement() {
    this.count--
  }
})

// store 发生修改立即调用 effect
autorun(() => {
  $count.innerText = `${store.count}`
});

// 第一个方法的返回值修改后才会调用后面的 effect
reaction(
  // 表示 store.count 修改后才会调用
  () => store.count,
  // 第一个参数为当前值,第二个参数为修改前的值
  // 有点类似与 Vue 中的 watch
  (value, prevValue) => {
    console.log('diff', value - prevValue)
  }
);

// 第一个方法的返回值为真,立即调用后面的 effect
when(() => store.count > 10, () => {
  console.log(store.count)
})
// when 方法还能返回一个 promise
(async function() {
  await when(() => store.count > 10)
  console.log('store.count > 10')
})()

总结

MobX 的介绍到这里就结束了,本文只是大致的列举了一下 MobX 的 API,希望大家能有所收获。后续打算再深入研究下 MobX 的实现,等我研究好了,再写篇文章来分享。

MobX 上手指南

收藏
评论区

相关推荐

MobX 上手指南
之前用 Redux 比较多,一直听说 Mobx 能让你体验到在 React 里面写 Vue 的感觉,今天打算尝试下 Mobx 是不是真的有写 Vue 的感觉。 题外话 在介绍 MobX 的用法之前,先说点题外话,我们可以看一下 MobX 的中文简介。在 MobX 的中文网站上写着: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程
Mobx-React:当前最适合React的状态管理工具
MobX _简单、可扩展的状态管理_ MobX 是由 Mendix、Coinbase、Facebook 开源和众多个人赞助商(https://cn.mobx.js.org/backers)所赞助的。 安装 安装: np
HTTPS
### 最近网站更新为https,于是做个笔记 ### 将域名 [www.domain.com](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.domain.com) 的证书文件1\_www.domain.com\_bundle.crt 、 ### 私钥文件2\_www.doma
HTTPS
楔子 谣言粉碎机前些日子发布的《[用公共WiFi上网会危害银行账户安全吗?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.guokr.com%2Farticle%2F100110%2F)》,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的。随着网络越
HTTPS加密原理
http(超文本传输协议) ------------- > 一种属于应用层的协议 缺点: 1. 通信使用明文(不加密),内容可能会被窃听 2. 不验证通信方的身份,因此有可能遭遇伪装 3. 无法证明报文的完整性,所以有可能已遭篡改 优点: 1. 传输速度快 https ----- > HTTPS 并非是应用层的一种新协议。只是 HTTP
HTTPS学习笔记
笔记详细地址:[http://note.youdao.com/yws/public/redirect/share?id=4882fca3838541908c75c92c92d28b74&type=false](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fnote.youdao.com%2F
HTTPS请求
##HTTPS请求## > **HttpsUtils代码** package com.ices.utils.httpsHelp; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader;
Hooks结合Mobx简单使用
**定义和导出Store** import { action, observable } from "mobx"; //定义一个Store:User class User { name = 'LL'; sex = 'man'; @action getName
Https详细分析
#### 目录介绍 * 01.为何会有Https * 02.解决方案分析 * 03.SSL是什么 * 04.RSA验证的隐患 * 05.CA证书身份验证 * 06.Https工作原理 * 07.Https代理作用 * 08.Https真安全吗 * 09.Https性能优化 ### 01.为何会有Https * H
Nginx配置https
一、开启nginx的ssl模块 1.未安装过nginx,编译安装配置参数如下: ./configure \--prefix=/usr/local/nginx \--with-pcre \--with-http\_ssl\_module #ssl模块 \--with-http\_stub\_status\_module \--wit
SpringBoot Web Https 配置
不管是游戏服务器开发,还是其它服务开发,越来越多的平台都要求服务端必须支持https的访问。以增加安全性。比如目前火热的小程序,要求服务端必须支持https,苹果商店也有说http请求要修改为https。所以https将会是游戏服务器的普遍需求。 一,证书生成 ======    证书可以自己使用jdk生成进行测试。但是在正常使用的时候,需要去第三方机构
Taro 1.2:将已有微信小程序转换为多端应用
在距离 Taro 1.1 发布 之后一个月,经历了 **500** 多次提交和 **17** 个预览版本的迭代之后,我们有信心在今天发布 Taro 1.2 正式版。 Taro 1.2 比起 Taro 1.1 和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于: * 微信小程序转多端应用 * 字节跳动(头
springboot2 配置 https
package cn.xiaojf.aibus.configure; import org.apache.catalina.Context; import org.apache.catalina.connector.Connector; import org.apache.coyote.http11.Http11Ni