当一个男人决定使用Mobx(一)

背景

随着RN项目在工程中的落地,一些RN项目不仅仅是简单的弹窗展示,里面可能存在较为复杂的逻辑和交互,随着业务复杂度的提升,一些问题也出现了,比如如何进行跨组件间的通信,如何进行状态管理,如何约束团队成员的代码编写,保证后续开发质量并且拉齐团队成员开发共识,这些问题的出现其实在传统的hook也是可以解决的,但是开发成本大,代码丑陋,团队成员的共识也不太一致,围绕状态管理这个核心(因为RN是通过状态进行驱动改变UI的),后续进行一系列的架构和研发规则的调整是后续的一个规划,考虑到团队成员的接收程度,目前初步选择简单易上手的mobx作为状态管理框架。

mobx简介

MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。它有些类似Android中的LiveData,通过使用观察者模式和代理模式,当数据变化时,重新触发监听者的回调。

mobx使用demo

js 复制代码
import { makeAutoObservable, autorun } from "mobx"

class Animal {
    name
    energyLevel

    constructor(name) {
        this.name = name
        this.energyLevel = 100
        makeObservable(this, {
            name: observable,
            energyLevel: observable,
            reduceEnergy: action,
            isHungry: computed,
        });
    }

    reduceEnergy() {
        this.energyLevel -= 10
    }

    get isHungry() {
        return this.energyLevel < 50
    }
}

const giraffe = new Animal("Gary")

autorun(() => {
    console.log("Energy level:", giraffe.energyLevel)
})

autorun(() => {
    if (giraffe.isHungry) {
        console.log("Now I'm hungry!")
    } else {
        console.log("I'm not hungry!")
    }
})

console.log("Now let's change state!")
for (let i = 0; i < 10; i++) {
    giraffe.reduceEnergy()
}

上面的代码是mobx官方文档上使用react的demo,流程上分为两部分

1.定义一个可观测状态

上面的Animal就是一个状态,其中的secondsPassed是一个可观测属性。其中secondPass为对象的key值,observable为具体对象。

2.注册一个观察

上面的autorun函数传进来的回调就是一个观察者函数,当Animal中的name更新时,会自动触发autoreturn中函数的重新执行。

核心类型

数据更新流程

上面的Animal,在调用makeObservable后会创建一个ObservableObjectAdministration,并且会作为一个隐藏属性挂在Animal对象上,之后会调用ObservableObjectAdministration的defineObservableProperty_,这里会对Animal中的每个属性创建一个ObservableValue,并且劫持对应属性的set和get方法。autorun会创建一个reaction,创建后会执行trackDerivedFunction,执行autorun中传入的方法(一般就是组件的渲染),当组件使用其中的状态属性时,会调用Observable的get方法,会调用reportObserved方法,将reaction中的newObserving_中添加当前ObservableValue,之后会调用bindDependencies方法,将当前reaction注册到ObservableValue,reaction其实就可以理解为观察者模式中的观察者。

之后属性更改的时候,因为ObservableObjectAdministration的属性劫持,会调用ObservableObjectAdministration中的setObservablePropValue_,获取到对应属性的ObservableValue,调用它的setNewValue_方法,setNewValue_方法会调用propagateChange方法,然后再次触发reaction的schedule_方法,调用其中传入的方法,触发UI重新刷新。

总结

整体来说Mobx是一个使用代理模式 (劫持属性的设置和获取)与观察者模式相结合的一个状态管理工具,每个属性都会追踪对应reaction,当数据更新时,触发reaction的回调。

关注我的公众号:'滑板上的老砒霜'

相关推荐
fatiaozhang952729 分钟前
中国移动浪潮云电脑CD1000-系统全分区备份包-可瑞芯微工具刷机-可救砖
android·网络·电脑·电视盒子·刷机固件·机顶盒刷机
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
2501_915918411 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview