Flutter 的状态管理框架很多，笔者个人使用起来比较舒适的是 flutter_mobx，使用了不短的时间，最近抽时间了解了一下 flutter_mobx 的实现。今天在这里分享一下。...如果你还不熟悉 flutter_mobx 的使用，可以参考它的文档：https://pub.dev/packages/flutter_mobx，也可以参考我之前写的一篇文章: Flutter与Mobx...; } } _context.endBatch(); } flutter_mobx 上下文 这里会执行 _onInvalidate 方法，负责监听的地方可以通过这个获取数据变化的回调...可以理解成是观察者 Atom 具体被观察的变量 image.png flutter_mobx flutter_mobx 提供了一个 Observer 组件，在这个组件里面使用 Store 里面的被观察对象...，会自动去更新组件ui。
而MobX提供机制来存储和更新应用状态供 React 使用。 ” Mobx 工作流程 这里先了解下大概整理流程，接下来会结合代码，介绍每一个部分。 ?...此外计算值还是高度优化过的，所以尽可能的多使用它们。 可以简单理解为：它是相关状态变化时自动更新的值，可以将多个可观察数据合并成一个可观察数据，并且只有在被使用时才会自动更新。...如果某个其它计算属性或 reaction 未使用该计算属性，也不会重新运行。 在这种情况下，它将被暂停。...2.3 when 接收两个函数参数，第一个函数必须根据可观察数据来返回一个布尔值，当该布尔值为 true 时，才会去执行第二个函数，并且只会执行一次。...注意 第一个参数，必须是根据可观察数据来返回的布尔值，而不是普通变量的布尔值。 如果第一个参数默认值为 true，则 when 函数会默认执行一次。
此外计算值还是高度优化过的，所以尽可能的多使用它们。 可以简单理解为：它是相关状态变化时自动更新的值，可以将多个可观察数据合并成一个可观察数据，并且只有在被使用时才会自动更新。...如果某个其它计算属性或 reaction 未使用该计算属性，也不会重新运行。 在这种情况下，它将被暂停。...知识点：computed(expression) 函数 一般可以通过下面两种方法观察变化，并获取计算值： 方法1： 将 computed 作为函数调用，在返回的对象使用 .get() 来获取计算的当前值...2.3 when 接收两个函数参数，第一个函数必须根据可观察数据来返回一个布尔值，当该布尔值为 true 时，才会去执行第二个函数，并且只会执行一次。...注意 第一个参数，必须是根据可观察数据来返回的布尔值，而不是普通变量的布尔值。 如果第一个参数默认值为 true，则 when 函数会默认执行一次。
如果不返回新的对象或者更新的值过于深层，经常会发现我的 action 发送出去了，但为什么组件没有更新呢？ 基于上面的优劣势，Redux 不适合用在小型项目中，开发成本往往比带来的收益还要更高。...正如 Mobx 官方介绍的一样，computed 是基于现有状态或计算值衍生出的值，如下面 todoList 的例子，一旦已完成事项数量改变，那么 completedCount 会自动更新。...它接收一个唯一标致的 key，和一个默认值 default。...它接收一个 get 成员方法，在这个 get 成员方法的参数里面还提供了一个 get 方法，通过这个 get 来获取到 state 的值。...它是一个基于 useEffect 的 Hook，它通过每次给 useState 传入一个新的数组来实现组件的强制更新，并且把这个更新的逻辑存了起来。
mobx 每次都是修改的同一个状态对象，基于响应式代理，也就是 Object.defineProperty 代理 get、set 的处理，get 时把依赖收集起来，set 修改时通知所有的依赖做更新。...发现每次更新组件都得到了通知并做了渲染，这就是全局状态管理的功能。...还有 getObservableValue 和 setObservableValue 来获取和设置某个 key 的值。...所以在组件里用到 state 的 get，做依赖收集时，就知道当前是哪个组件了： 当然，这里收集的不是具体哪个组件，而是 onInvalidate 的回调函数，也就是收到更新的通知之后如何做出反应。...性能方面 mobx 的响应式能精准的通知依赖做更新，而 redux 只能全局通知，而且 mobx 只是修改同一个对象，不是每次创建新对象，性能会比 redux 更高。
，就为了区区获取张三的存款这么件事儿，耗费那么多人力资源，值么？...： 当有人请求观察员所监控的值（比如income）时，会触发 MobX 所提供的 reportObserved 方法； 当观察员所监控的值（比如income）发生变化时，会触发 MobX 所提供的 propagateChanged...所以 MobX 就将任务的执行笼罩在自己所营造的氛围中，改变不了任务实体，我改变环境总行了吧？！！...）操作是生成的 执行完之后 derivation.newObserving 会置空，而 derivation.observing 属性获得更新，该属性反映的 探长 和 观察员 之间最新的关联关系； 依赖更新肯定需要遍历...现在再回过头来看刚才官方文档截图中的第二句话："然后每次它的依赖关系改变时会再次被触发" ?
MobX是一个简单有效的状态管理库，以派生(derive)的概念为核心，以观察者模式为手段，达到了修改数据自动更新界面等目的 正因为其本身提供了包装react的方法，可以简洁的改善react组件，所以官网文档和几乎所有教程都以...使得只在满足其返回值条件时，reaction才执行，从而避免不必要的响应 var obj = mobx.observable({a:1, b:2});var act = mobx.action(function...) 该方法头两个参数是两个函数，头一个data函数跟踪并返回用到的数据；返回值传递给第二个产生副作用的effect函数做参数 和autorun不同的是，effect函数在创建时并不立即生效，而是在第一次得到新的值后生效...reaction()返回值是一个解除观察的函数 第三个参数options包含以下选项 context 指定this的指向 fireImmediately 首次接收数据时是否触发，默认为false delay...延迟毫秒数 compareStructural 默认为false; 如果为true，则每次比较data函数返回值的结构，和上一次不一样才调用effect函数 name 调试用的名字 const todos
视图层缓存 mobx提供了一个computed方法，通过computed方法计算的值如果放到了监听器中，那么这个值会被缓存，state没有变动的情况下，computed的值不会重新计算。...mobx提供了一个computed方法，用于将state映射为新的值，这些值常常被用作视图层的渲染。...需要妥协的有： 1、内存上的增加： mobx会将给定对象深拷贝一份作为私有变量，然后再创建一个对象，包含该私有变量所有属性的getter和setter方法。...我们知道redux的每次store更新，都生成一个新的state引用，可以把旧的state保存下来，需要撤销操作时，将旧的state重新render一遍就好了。...我在另一篇文章中讲吧.....
，而是如果值为对象接着递归遍历，这是因为我们如果对根结点进行代理了，当他属性值为对象时，我们在进行重新赋值回触发 set 方法，但这里的触发是没有必要的影响性能。...用过 vue3 的朋友应该了解，effect 函数也是和内部的属性进行关联的，我们可以定义一个全局变量存储，当执行 autorun 的函数时，对该变量进行赋值，同时我们可以通过拦截的 get 方法对属性和全局的值进行关联...，我们依次执行该属性依赖的函数。..., key) { // 获取对象属性时，进行依赖函数的收集，一个属性可以对多个函数 reaction.collect() return Reflect.get(...key === 'string') { // 是通过装饰器实现的，先把装饰的对象就行深度代理 let v = descritor.initializer() // 获取原始值 v =
@observer就是在你订阅观察的对象的地方添加注释来监听对象的更新 Observable 方法的值可以是如下类型： 1、object(原型是Object): Observable方法将该对象克隆成新对象并将属性转变成可观察的...这个箱子来存这些值，并使用.get()用来获取当前值，采用.set(newValue)来更新值。...那就使用autorun，但是一般这种情况比较少 Action 比起官方说的“动作”，我更愿意称为是“行为”，mobx的action吸收了redux和vuex的数据处理的复杂逻辑 用来修改状态，不同于Computed...computed创建的函数，是有自己的观察者的，而autorun是只有它的依赖关系改变时才会重新计算， 否则它的值被认为是不相干的。...的数据更新时来刷新组件 @observer 是observer(class ***{})的注解形式，用来观察组件， 高阶组件 @observer class Test extends React.Component
// 引入mobx import { observable } from 'mobx' // 对象转换 const obj = observable({ name: 'Rogan',...([ ["name", "Rogan"] ])) /* 注意： 我们实际操作的是观察对象，而非我们创建时传入的值, 我们可能修改保存观察对象的变量，这是将丢失观察对象...(get, set) // get: 获取值函数 // set: 设置值函数 import { observable, computed } from 'mobx' const obj = observable...true 时执行, 只执行一次 const Rogan = observable({ name: 'Rogan', age: 100 }) // when 将返回终止函数，调用终止函数后...Rogan.age = 110 // -> dead // 响应函数只会执行一次 Rogan.age = 0 Rogan.age = 110 // 无输出 when promise模式 当when 未配置响应函数时
store/action.types'// 声明参数接口interface Props { count: number add: (num: number) => void}// ReturnType获取函数返回值类型...函数中通过reaction.track进行依赖收集，将该组件加到该Observable变量的依赖中（bindDependencies）。...return result}触发依赖Observable（被观察者，状态）修改后，会调用它的set方法，然后再依次执行该Observable之前收集的依赖函数，触发rerender。...组件更新用组件更新来简单阐述总结一下：mobx的执行原理。observer这个装饰器（也可以是Hoc），对React组件的render方法进行track。...每次都进行依赖收集的原因是，每次执行依赖可能会发生变化总结简单总结了一下目前较为常用的状态管理方式，我个人最喜欢的使用方式是Mobx+Hooks，简单轻量易上手。
自动执行只在 state 改变的时候触发，就好像 Excel 中的图表只在单元格数据改变时更新一样。...Autorun 里的东西首先会运行一次，然后当其中的函数有 observable 的数据发生变化时，会再次运行。 这里我们使用了 todos 属性，每次 todos 变化了我们就打印出新的东西。...[0].task = "grok MobX tutorial"; 举个栗子（sf 的一个问题有感） 对于单个对象,我可以使用computed通过计算获得一些属性，比如 @observable good...这种情况我如何通过computed获得数组某个元素的计算属性呢,还是只能在改变number的函数中手动去更改,但是我数组的对象中并没有一个totalPrice的属性，每次把单个good push到goodsList...的函数自动执行，这个用来写 log，发请求很不错； @observer 修饰器让 React 组建自动起来，它会自动更新，即便是在一个很大的程序里也会工作的很好； MobX 不是一个状态容器 很多人把
主要的区别是这些函数不产生值，而是自动地执行一些任务，这些任务通常与 I/O 相关。他们保证了在正确的时间自动地更新 DOM 或者发起网络请求。 最后我们看看 行动（actions）。...但是如果我们不需要明确地调用 report，而是生命我们希望它在每次状态的改变时被调用呢？这将使我们不再需要纠结在所有可能影响报告的地方调用 report。我们想要保证最新的报告被打印。...我们为 MobX 标记了一些 @observable 属性，这些属性的值可以随时改变。计算值是用 @computed 标记以表示他们可以由 state 推导出来。...autorun 创建了一个 响应（Reaction） 并执行一次，之后这个函数中任何 observable 数据变更时，响应都会被自动执行。...这些改变会被 TodoView 自动获取。在 MobX 的帮助下，我们不需要先格式化数据并写相应的选择器以保证我们的组件可以被更新。实际上，甚至是数据的存储位置也并不重要。
本文目标 本文主要解决我个人在源码阅读中的疑惑： 在官方文档 如何(不)使用装饰器 中，为什么说开启 @observable、@computer 等装饰器语法，是和直接使用 decorate 是等效的？...从另一个角度来讲，在 mobx 代码实现中，Enhancer 是实现 Observable 观察值必不可少的一部分，没有它就实现不了观察值功能，也就构建不起 MobX 体系了；而如果缺失 @observable...，直接返回 referenceEnhancer：只转换 Object, Array, Map 本身，不对其属性（或元素）转换 refStructEnhancer：结构内容值发生改变的时候才进行数据更新...在创建 observable 时发挥作用 再结合 types/modifier.ts 中有各种 Enhancer 的具体内容，就能大致了解 enhancer 是如何起到 转换数值 的作用的，再分析下去就是观察值...某种意义上已经成规范了） 先从对象中获取属性成员（或方法成员）的原始 属性描述符 将属性描述符传给装饰器方法，获取更改后的 属性描述符 通过 Object.defineProperty 将更改后的属性描述符
observable方法其实是适配器 这里我大致划分了一下，分成 4 部分内容来理解： 第一部分：createObservable 方法刚才粗略讲过，是 MobX API 的 observable 的别名...当我第一次阅读 官网文档 中针对有关 observable.box 的描述时： ? 官网对 box 方法的说明 来回读了几次，“盒子”是个啥？它干嘛用的？...其作用机制也很直接，该方法调用的最终都是调用实例的 intercept 方法，这样每次在值变更之前（以下 prepareNewValue 方法执行），都会触发观察值上所绑定的所有的 拦截器： ObservableValue.prototype.prepareNewValue...为什么要添加 $mobx 属性？其具体作用又是什么？ 通过阅读源码，我无从获知作者添加 $mobx 属性的理由，但可以知道 $mobx 的作用是什么。...observable 是一个函数，也是 mobx 提供的 API，等于 createObservable，代表操作，该操作过程中会根据情况调用 observable.object（或者 observable.array
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
