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

状态管理可以说是现代前端开发中最核心的一环。为了解决前端应用的复杂度,生态圈里诞生了各式各样的状态管理方案,按编程范式分类有函数式(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 就会动态更新了。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章