首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带你走进Flutter_Mobx

Flutter 的状态管理框架很多,笔者个人使用起来比较舒适的是 flutter_mobx,使用了不短的时间,最近抽时间了解了一下 flutter_mobx 的实现。今天在这里分享一下。...如果你还不熟悉 flutter_mobx 的使用,可以参考它的文档:https://pub.dev/packages/flutter_mobx,也可以参考我之前写的一篇文章: FlutterMobx...也就是get的时候就会把atom加到当前 derivation的观察队列里去。写数据的时候就按照开头的流程走去触发观察者回调。...可以理解成是观察者 Atom 具体被观察的变量 image.png flutter_mobx flutter_mobx 提供了一个 Observer 组件,在这个组件里面使用 Store 里面的被观察对象...总结 到这里我们就比较完整的了解了flutter_mobx的核心流程。这里能看到,如果我们理清楚了数据的流向,找到了观察者和被观察者,其实大体流程就比较清晰了。

67610
您找到你想要的搜索结果了吗?
是的
没有找到

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

1K20

MobX】391- MobX 入门教程(下)

三、MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数据的值。...多数情况下,这种高频的触发是完全没有必要的。 比如用户对视图的一次点击操作需要很多修改 N 个状态变量,但是视图的更新只需要一次就够了。 为了优化这个问题, MobX 引入了 action 。...3.1 (@)action action 是修改任何状态的行为,使用 action 的好处是能将多次修改可观察状态合并成一次,从而减少触发 autorun 或者 reaction 的次数。...简单实例 这里以简单计数为例,实现点击按钮,数值累加的简单操作,如图: ?...事实,我们只需要记住 observer 方法,将所有 React 组件用 observer 修饰,就是 react-mobx 的用法。 4.

87920

MobXMobX 简单入门教程

也提供使用装饰 @observable 来将其转换成可观察的,可以使用在实例的字段和属性。...怎么触发自动运行? 当修改 autorun 中任意一个可观察数据即可触发自动运行。...2.5 小结 computed 可以将多个可观察数据组合成一个可观察数据; autorun 可以自动追踪所引用的可观察数据,并在数据发生变化时自动触发; when 可以设置自动触发变化的时机,是 autorun...多数情况下,这种高频的触发是完全没有必要的。 比如用户对视图的一次点击操作需要很多修改 N 个状态变量,但是视图的更新只需要一次就够了。 为了优化这个问题, MobX 引入了 action 。...3.1 (@)action action 是修改任何状态的行为,使用 action 的好处是能将多次修改可观察状态合并成一次,从而减少触发 autorun 或者 reaction 的次数。

1.4K00

Mobx 核心概念简单入门:以股票为例

核心概念 MobX 主要包括了四个核心概念:可观察的状态、根据状态得到的计算值、基于状态变化发生的反应,触发状态变化的动作。 下面我们以股票为例,简单说明下这四个核心概念。...可观察的状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能,这样当数据发生变化的时候就可以继续进行下一步发应...(Computed values) Mobx 可通过 @computed 装饰来定义某些状态发生变化时自动更新的值。...(Action) 在非严格模式下,mobx的状态可以在任何地方进行修改,如上面我们改变股价就是直接修改。...mobx-react 提供一个 @observer 装饰, 当你的状态发生变化时,会自动(autorun)调用组件的 render 方法,更新 UI,这样就可以把你的(无状态函数)组件变成响应式组件。

87250

Mobx 核心概念简单入门:以股票为例

核心概念 MobX 主要包括了四个核心概念:可观察的状态、根据状态得到的计算值、基于状态变化发生的反应,触发状态变化的动作。 下面我们以股票为例,简单说明下这四个核心概念。...那么买入卖出即是触发状态变化的动作。...可观察的状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能,这样当数据发生变化的时候就可以继续进行下一步发应...(Computed values) Mobx 可通过 @computed 装饰来定义某些状态发生变化时自动更新的值。...(Action) 在非严格模式下,mobx的状态可以在任何地方进行修改,如上面我们改变股价就是直接修改。

80520

React 进阶 - React 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 反应

83011

MobX学习之旅

例如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

1.4K20

MobX 背后的基础原理

更酷的是,如果在事务结束之前使用了一个计算值,MobX 将会保证你得到一个更新后的值! 实际几乎没人明确的使用事务,在 MobX 3 中,事务甚至被弃用了。因为 action 自动应用了事务。...action 在概念更优雅了;一个 action 表示了一个用来更新状态的函数。而 reaction 正相反,被用来响应状态的改变。 ?...所以 MobX 拿捏了很好的分寸,以确保陈旧值不会被观察,且派生不会超过预期的频繁运行。事实,如果没有活跃的监听,计算压根不会运行。...可以轻易的在 MobX 问题追踪中找出一些无意间将对象转为可观察对象引起的非预期行为的问题。...和 transaction 一样,很少在实际中用这个 API,但是这种 action 中的处理机制在概念非常有意义:action 运行以响应用户事件,而非状态改变,所以它们不应跟踪其使用的数据 --

1.6K10

Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案

Mobx是Redux之后的一个状态管理库,基于响应式状态管理,整体是一个观察者模式的架构,存储state的store是被观察者,使用store的组件是观察者。...简单介绍一下MobxMobx也是采用单向数据流,通过action改变state,state的改变会导致受其影响的view更新 ? ?...computed value必须是纯函数,不能用它修改state Mobx示例 mobx大量使用了装饰的语法,现在create-react-app创建的项目默认是不支持装饰的,我们为了让他支持装饰...Main { } 如果在浏览console能够正常输出hello mobx就配置成功了,已经可以支持装饰的语法了。...总结 mobx主要是负责状态管理,mobx-react主要是提供store和注入 状态的更新是 action -> store -> views 这么一个流程,主要理解这个流程就可以,状态管理再多工具都是这样

1.1K10

React+Mobx写法更像Vue了

vue作者尤雨溪说: Mobx 在 React 社区很流行,实际在 Vue 也采用了几乎相同的反应系统。...在end中触发的回调函数,被action给包裹了,这就很好验证了上面加粗的那句话,action无法影响当前函数调用的异步操作,而这个回调毫无疑问是一个异步操作,所以必须再用一个action来包裹住它,这样程序才不会报错...有兴趣的同学可以直接阅读官方文章 Mobx官方文档——Observable Types Observable Objects 如果使用observable来修饰一个Javascript的简单对象,那么其中的所有属性都将变为可观察的...,如果其中某个属性是对象或者数组,那么这个属性也将被observable进行观察,说白了就是递归调用。...= false) 用来监听数组的变化(类似ES7中的observe,可惜这个ES7中的observe将被废弃),它返回一个用以注销监听的函数。

1.6K20

TS+React+Router+Mobx+Koa打造全栈应用

而vuex中的action是获取到数据以后再内部触发mutation。...总得来说,在react中可以把mobx和vuex看成类似的工具,都是进行全局数据管理的,可以跨组件使用。区别在于mobx更加强大,可以更加灵活的定义需要观察的对象。...这个不仅仅在react中,在任何一段JS代码里都可以观察进行观察。并且执行的业务逻辑这块是保存在mobx里的,@observer只是一个'mobx-react'下的用于帮助渲染的装饰。...这个装饰会根据state的改变触发react的diff进行渲染。...我们知道使用事件委托要比在每一个元素都绑定了事件监听要好很多,在vue中,我们给v-for渲染出来的组件绑定事件监听时,文档已经指出帮我们做了关于委托的优化。

1.8K70

MobX管理状态(ES5实例描述)-3.常用API

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

42040

MobX管理状态(ES5实例描述)-4.常用工具方法

,或代价较大的操作 如果指定了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(

1K50

redux、mobx、concent特性大比拼, 看后生如何对局前辈

(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装饰) 见上面依赖收集的实例代码,此处不再重叙。

4.6K61
领券