用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

最简单的小程序状态管理方案! - mobx-mini

Rolan 2019-12-2 09:15

写在前面 状态管理可以说是现代前端开发中最核心的一环。为了解决前端应用的复杂度,生态圈里诞生了各式各样的状态管理方案,按编程范式分类有函数式(redux),响应式(rxjs),透明的函数响应式(mobx),按状态存 ...

写在前面

状态管理可以说是现代前端开发中最核心的一环。为了解决前端应用的复杂度,生态圈里诞生了各式各样的状态管理方案,按编程范式分类有函数式(redux),响应式(rxjs),透明的函数响应式(mobx),按状态存储分类有单 store 和 多 store 的,有专门处理异步代码的(rxjs),还有连异步都不处理的(redux).....,基本上可以满足各种场景的前端应用。

然而受制于小程序封闭的生态,各种状态方案的绑定库都无法在小程序内使用。已有的绑定库不能用?那就写一个呗。

状态管理的目标

在迈入正文前,先说一下我们对状态管理方案的一些诉求:

  1. 基于已有的状态管理方案,redux, mobx, rxjs,最大程度复用现有生态
  2. Typescript 友好(ts 真香)
  3. API 简单清晰,性能基线高,无需手动优化就能达到不错的性能。
  4. 少模板代码,代码敲多了手疼(说的就是 redux)

rxjs 学习曲线过于陡峭,也没定义状态如何存储,划掉;redux 概念挺多,模板代码和概念一样多,不要。那就剩下 mobx 了。

API

首先定义 store,并连接到页面。

observer(context, mapState)

import { observable } from 'mobx';
import { observer } from 'mobx-mini';
const rootStore = observable({
  title: 'mobx-app'
});
const store = observable({
  count: 0,
  get isOdd() {
    return this.seconds % 2 === 1;
  },
  tick() {
    this.count += 1;
  }
});
const mapState = () => ({
  count: store.count,
  seconds: store.isOdd,
  title: rootStore.title,
});
// page
Page({
  add() {
    store.tick();
  },
  onLoad() {
    observer(this, mapState);
  },
});
复制代码

直接在 axml 中使用吧

<view>count</view>
复制代码

实现原理

如果你还没有对 mobx 有所了解,建议看一下它的中文文档 了解一下前置知识。
原理就是 observer  APi 会对参数 mapState 中的 observable 对象注册 autorun 函数,在 autorun 内部,监听到 observable 变动后,直接对页面  setData 。小程序的 data 就会动态更新了。

总结

提醒一下,暂时只支持支付宝小程序,且未在生产环境中使用过。
源码在这里,只有100行不到。github.com/luv-sic/mob…

参考

cn.mobx.js.org/
github.com/b5156/mobx-…

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Richoooo 来自: 掘金