用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

湖人vs老鹰:最簡單的小程序狀態管理方案! - mobx-mini

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-12-2 09:15

寫在前面 狀態管理可以說是現代前端開發中最核心的一環。為了解決前端應用的復雜度,生態圈里誕生了各式各樣的狀態管理方案,按編程范式分類有函數式(redux),響應式(rxjs),透明的函數響應式(mobx),按狀態存 ...

寫在前面

狀態管理可以說是現代前端開發中最核心的一環。為了解決前端應用的復雜度,生態圈里誕生了各式各樣的狀態管理方案,按編程范式分類有函數式(redux),響應式(rxjs),透明的函數響應式(mobx),按狀態存儲分類有單 store 和 多 store 的,有專門處理異步代碼的(rxjs),還有連異步都不處理的(redux).....,基本上可以滿足各種場景的前端應用。

然而受制于湖人vs爵士季后赛封閉的生態,各種狀態方案的綁定庫都無法在小程序內使用。已有的綁定庫不能用?那就寫一個唄。

狀態管理的目標

在邁入正文前,先說一下我們對狀態管理方案的一些訴求:

  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 來自: 掘金
查看河北福彩排列七 高铁京沈高铁一百米之内能赚钱吗 赚钱啊周星驰 给别人卖陶瓷赚钱吗 六肖中带狗赔 百易街机金蟾捕鱼360 重庆快乐10分定位计划 捕鱼来了弹头在那里打 金融中介业务员赚钱嘛 怎样在家就赚钱 36选7中奖奖金多少 吉林11选5中奖金额 hi彩分分彩走势图 69棋牌游戏大厅 福建十一选五人工在线计划 海南环岛赛车彩票