Flutter 的状态管理框架很多，笔者个人使用起来比较舒适的是 flutter_mobx，使用了不短的时间，最近抽时间了解了一下 flutter_mobx 的实现。今天在这里分享一下。...如果你还不熟悉 flutter_mobx 的使用，可以参考它的文档：https://pub.dev/packages/flutter_mobx，也可以参考我之前写的一篇文章: Flutter与Mobx...也就是get的时候就会把atom加到当前 derivation的观察队列里去。写数据的时候就按照开头的流程走去触发观察者回调。...可以理解成是观察者 Atom 具体被观察的变量 image.png flutter_mobx flutter_mobx 提供了一个 Observer 组件，在这个组件里面使用 Store 里面的被观察对象...总结 到这里我们就比较完整的了解了flutter_mobx的核心流程。这里能看到，如果我们理清楚了数据的流向，找到了观察者和被观察者，其实大体流程就比较清晰了。
开始 在以前的一篇文章中，半行代码 介绍到在 Flutter 里面使用 MobX, 今天我们就来聊聊 Flutter 和 MobX 的那些事。...这里套用 MobX 的一张图来表示他的核心概念： show code 我们来看看 Mobx 的具体用法，套用 Flutter 默认的 计数器点击 +1 的例子。...一个简单的计数器可以表示成一个可观察的数字状态，计数器表示为 Counter 对象： part 'counter.g.dart'; class Counter = CounterBase with _...这里在调用 @action 的函数之后，counter 里面的值变化后会自动体现在 UI 上。...在reaction的基础上加上 predicate 函数返回 true 最佳实践 使用了 MobX，那么我们的代码该如何组织呢？
mobx 响应式状态管理库 安装 // npm npm i --save mobx // yarn yarn add mobx 基础概念 所谓的响应式，既是将原有数据结构,例如 数组，对象等转变为可观察对象..., 通过对可观察对象的监控，当数据变化做出对应的动作，所以可以大概归纳为: 构建观察对象 设置响应动作 在mobx中构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象...赋值相同时，不会触发 autorun computed](https://cn.mobx.js.org/refguide/computed-decorator.html) 有时我们需要观察对象处理后的数据...// -> coco 24 // -> coco 30 warpChange('jeck', 11) // 只触发一次 autorun // -> jeck 11 装饰器模式 多数情况下，mobx...与 异步函数 action 在绑定异步函数中，外层action 对异步内的回调时无效的 class React 安装 mobx-react 依赖 // npm npm i --save mobx-react
三、MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容中，我们了解到，对可观察的数据做出反应的时候，需要我们手动修改可观察数据的值。...多数情况下，这种高频的触发是完全没有必要的。 比如用户对视图的一次点击操作需要很多修改 N 个状态变量，但是视图的更新只需要一次就够了。 为了优化这个问题， MobX 引入了 action 。...3.1 (@)action action 是修改任何状态的行为，使用 action 的好处是能将多次修改可观察状态合并成一次，从而减少触发 autorun 或者 reaction 的次数。...简单实例 这里以简单计数器为例，实现点击按钮，数值累加的简单操作，如图： ?...事实上，我们只需要记住 observer 方法，将所有 React 组件用 observer 修饰，就是 react-mobx 的用法。 4.
也提供使用装饰器 @observable 来将其转换成可观察的，可以使用在实例的字段和属性上。...怎么触发自动运行？ 当修改 autorun 中任意一个可观察数据即可触发自动运行。...2.5 小结 computed 可以将多个可观察数据组合成一个可观察数据； autorun 可以自动追踪所引用的可观察数据，并在数据发生变化时自动触发； when 可以设置自动触发变化的时机，是 autorun...多数情况下，这种高频的触发是完全没有必要的。 比如用户对视图的一次点击操作需要很多修改 N 个状态变量，但是视图的更新只需要一次就够了。 为了优化这个问题， MobX 引入了 action 。...3.1 (@)action action 是修改任何状态的行为，使用 action 的好处是能将多次修改可观察状态合并成一次，从而减少触发 autorun 或者 reaction 的次数。
核心概念 MobX 主要包括了四个核心概念：可观察的状态、根据状态得到的计算值、基于状态变化发生的反应，触发状态变化的动作。 下面我们以股票为例，简单说明下这四个核心概念。...可观察的状态（Observable state） MobX 通过使用 @observable 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能，这样当数据发生变化的时候就可以继续进行下一步发应...（Computed values） Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新的值。...（Action） 在非严格模式下，mobx的状态可以在任何地方进行修改，如上面我们改变股价就是直接修改。...mobx-react 提供一个 @observer 装饰器， 当你的状态发生变化时，会自动（autorun）调用组件的 render 方法，更新 UI，这样就可以把你的(无状态函数)组件变成响应式组件。
核心概念 MobX 主要包括了四个核心概念：可观察的状态、根据状态得到的计算值、基于状态变化发生的反应，触发状态变化的动作。 下面我们以股票为例，简单说明下这四个核心概念。...那么买入卖出即是触发状态变化的动作。...可观察的状态（Observable state） MobX 通过使用 @observable 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能，这样当数据发生变化的时候就可以继续进行下一步发应...（Computed values） Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新的值。...（Action） 在非严格模式下，mobx的状态可以在任何地方进行修改，如上面我们改变股价就是直接修改。
# Mobx 特性 # 观察者模式 Mobx 采用了一种'观察者模式'—— Observer，整个设计架构都是围绕 Observer 展开： 在 mobx 的状态层，每一个需要观察的属性都会添加一个观察者...在正常情况下，在 React 应用中使用 Mobx ，本质上 mobx 里面的状态，并不是存在 React 组件里面的，是在外部由一个个 mobx 的模块 model 构成，每一个 model 可以理解成一个对象...# 装饰器模式 为了建立观察者模式，便捷地获取状态 / 监听状态，mobx 很多接口都支持装饰器模式的写法，所以在 mobx 中，装饰器模式是最常用的写法： class Root { @observable...常用 API mobx-react 中的 api ，用于把 mobx 中的状态，提供给组件，并把组件也变成可观察的 —— mobx 状态改变，组件触发更新。...观察者属性管理者-ObservableAdministration # 依赖收集 观察者-ObservableValue 注入模块-Provider 和 inject 可观察组件-observer 反应器
例如React的体系，react + redux + react-redux + redux-saga, view层触发一个action，中间件会将这个动作进行dispatch，然后reducer执行相应的更新状态方法...三、MobX核心模块 MobX的数据驱动解构： action--(update)-->state--(update)-->computed--(trigger)-->reaction...this.changeName}>开始 {this.myname} 只要firstname和lastname发生变化都会更新dom 但是，如果仅仅想要在被观察的变量有变化的时候触发...，而不是立即执行autorun，那么我们可以用到reaction了； Reaction Reaction是在初次数据变化后才会触发 四、Mobx-react核心概念 Observer 是mobx-react...，当组件重新render的时候会被触发，但在初始渲染前是不会被触发的 onError mobx-react提供的错误钩子函数来收集错误 用法： import { onError } from 'mobx-react
更酷的是，如果在事务结束之前使用了一个计算值，MobX 将会保证你得到一个更新后的值！ 实际上几乎没人明确的使用事务，在 MobX 3 中，事务甚至被弃用了。因为 action 自动应用了事务。...action 在概念上更优雅了；一个 action 表示了一个用来更新状态的函数。而 reaction 正相反，被用来响应状态的改变。 ?...所以 MobX 拿捏了很好的分寸，以确保陈旧值不会被观察，且派生不会超过预期的频繁运行。事实上，如果没有活跃的监听，计算压根不会运行。...可以轻易的在 MobX 问题追踪器中找出一些无意间将对象转为可观察对象引起的非预期行为的问题。...和 transaction 一样，很少在实际中用这个 API，但是这种 action 中的处理机制在概念上非常有意义：action 运行以响应用户事件，而非状态改变，所以它们不应跟踪其使用的数据 --
Mobx是Redux之后的一个状态管理库，基于响应式状态管理，整体是一个观察者模式的架构，存储state的store是被观察者，使用store的组件是观察者。...简单介绍一下Mobx： Mobx也是采用单向数据流，通过action改变state，state的改变会导致受其影响的view更新 ? ?...computed value必须是纯函数，不能用它修改state Mobx示例 mobx大量使用了装饰器的语法，现在create-react-app创建的项目默认是不支持装饰器的，我们为了让他支持装饰器...Main { } 如果在浏览器console能够正常输出hello mobx就配置成功了，已经可以支持装饰器的语法了。...总结 mobx主要是负责状态管理，mobx-react主要是提供store和注入 状态的更新是 action -> store -> views 这么一个流程，主要理解这个流程就可以，状态管理再多工具都是这样
在Mobx5之前，响应式原理是基于Object.defineProperty的，可以向下兼容到ES5浏览器，而从Mobx5开始使用proxy特性支持响应式，最低支持ES6浏览器。...相较于Redux，Mobx只强调下面三个概念State(状态)Actions(动作)Derivations(派生)一句话概括：在任何事件中调用action，修改state，如果这个state是响应式的，...那么会通知基于这个state派生的计算值，或者触发派生的副作用。...import { makeObservable, observable, action, runInAction } from "mobx";class MyStore { let tableList...import { observable, action } from "mobx"funtion App () { const myStore = observable({ tableList
vue作者尤雨溪说： Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。...在end中触发的回调函数，被action给包裹了，这就很好验证了上面加粗的那句话，action无法影响当前函数调用的异步操作，而这个回调毫无疑问是一个异步操作，所以必须再用一个action来包裹住它，这样程序才不会报错...有兴趣的同学可以直接阅读官方文章 Mobx官方文档——Observable Types Observable Objects 如果使用observable来修饰一个Javascript的简单对象，那么其中的所有属性都将变为可观察的...，如果其中某个属性是对象或者数组，那么这个属性也将被observable进行观察，说白了就是递归调用。...= false) 用来监听数组的变化(类似ES7中的observe，可惜这个ES7中的observe将被废弃)，它返回一个用以注销监听器的函数。
而vuex中的action是获取到数据以后再内部触发mutation。...总得来说，在react中可以把mobx和vuex看成类似的工具，都是进行全局数据管理的，可以跨组件使用。区别在于mobx更加强大，可以更加灵活的定义需要观察的对象。...这个不仅仅在react中，在任何一段JS代码里都可以观察进行观察。并且执行的业务逻辑这块是保存在mobx里的，@observer只是一个'mobx-react'下的用于帮助渲染的装饰器。...这个装饰器会根据state的改变触发react的diff进行渲染。...我们知道使用事件委托要比在每一个元素上都绑定了事件监听器要好很多，在vue中，我们给v-for渲染出来的组件绑定事件监听器时，文档已经指出帮我们做了关于委托的优化。
MobX是一个简单有效的状态管理库，以派生(derive)的概念为核心，以观察者模式为手段，达到了修改数据自动更新界面等目的 正因为其本身提供了包装react的方法，可以简洁的改善react组件，所以官网文档和几乎所有教程都以..., fn) 被用来对那些没有单独设置观察者的状态创建reaction函数 当初始化和依赖的值改变时，相关的函数就会执行 autorun的返回值是一个解除观察的函数 var str = mobx.observable..., fn)语法，创建一个action，用来改变状态 action可以用于任何改变可观察状态的方法，或有副作用的方法 对于派生属性对应的setter方法，将自动被视为一个action 设置mobx.useStrict...(true)，就可以严格限定对状态的改变只能在action中进行 action中的fn会被包装上mobx.untracked()、mobx.transaction()和mobx.extras.allowStateChanges...runInAction也被用来替换过时的transaction，批量执行多个状态变更，以免触发多次事件 var obj = mobx.observable({a:1, b:2});var act = mobx.action
其次要建立 Model 和 Feature 的关联，实现修改 Model 就会触发 Feature UI 更新的机制，这样就不需要从 Feature 上获取数据和修改 UI 了。...MobX 介绍 · MobX 中文文档 import { makeObservable, observable, action } from 'mobx'; class Model { public...可以基于 Mobx 封装 observer、watch 两个装饰器方便调用。...因为通过装饰器无法获取到类的实例，所以将 watchers 先挂载到原型上面，再通过 observer 拦截构造函数，进而去执行所有的 watchers，这样就可以将挂载到类上的 Model 实例传进去...forEach((watcher) => watcher(this, this.model)); } }; // 观察装饰器，用于观察 Model 中某个属性变化后自动触发 watcher
其次要建立 Model 和 Feature 的关联，实现修改 Model 就会触发 Feature UI 更新的机制，这样就不需要从 Feature 上获取数据和修改 UI 了。...() { // 将 count 设置为可观察属性 makeObservable(this, { count: observable, increment: action,...可以基于 Mobx 封装 observer、watch 两个装饰器方便调用。...因为通过装饰器无法获取到类的实例，所以将 $watchers 先挂载到原型上面，再通过 observer 拦截构造函数，进而去执行所有的 $watchers，这样就可以将挂载到类上的 Model 实例传进去...forEach((watcher) => watcher(this, this.model)); } };// 观察装饰器，用于观察 Model 中某个属性变化后自动触发 watcherexport
，或代价较大的操作 如果指定了scope参数，则fn会被绑定到scope上 4.2 Atom 符合Atom类规则的实例，可以在数据变化时通知MobX，或者接受MobX该对象是否被观察的通知以做出响应 class...({a:1, b:2});var act = mobx.action(function(){ setTimeout(function(){ console.log('[after 1s...第三个参数options包含以下选项 context 指定this的指向 fireImmediately 首次接收数据时是否触发，默认为false delay 延迟毫秒数 compareStructural...默认为false; 如果为true，则每次比较data函数返回值的结构，和上一次不一样才调用effect函数 name 调试用的名字 const todos = mobx.observable([...: mobx.action(function(state) { this.state = state; }) }); mobx.when(
将 action 应用到 model 上，实现数据层的修改。...Reflux Reflux 是在 Flux 的基础上编写的一个 Flux 实现，从形式上看，去掉了显式的 Dispatcher，将 action 表现为函数的形式，构建一个 action 的方式为...当触发一个 action 的时候，新 reducer 会触发原有的多个 reducer: const book(state = [], action) => { // ......MobX MobX 是一个比较新的状态管理库，它的前身是 Mobservable，实际上 MobX 相当于是 Mobservable 的 2.0 版本。...MobX 的特点总结起来有以下几点： Observable：它的 state 是可被观察的，无论是基本数据类型还是引用数据类型，都可以使用 MobX 的 (@)observable 来转变为 observable
(store, inject) 当应用存在多个store时(这里我们可以把一个store理解成redux里的一个reducer块，聚合了数据、衍生数据、修改行为)，mobx的store获取方式有多种，例如在需要用的地方直接引入放到成员变量上...版本(this.XXX) 同步action与异步action import { observable, action, computed } from "mobx"; const delay = (ms...mobx版本(computed,useObserver) 利用装饰器或者decorate函数标记要观察的属性或者计算的属性 import { observable, action, computed }...查看mobx示例 concent(state,moduleComputed) 无需任何装饰器来标记观察属性和计算结果，仅仅是普通的json对象和函数，运行时阶段被自动转为Proxy对象。...(computed装饰器) 见上面依赖收集的实例代码，此处不再重叙。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
