mobx使用
- 1.mobx状态管理
安装:creact-react-app mobx
action、store、reducer。
action是一个函数,事件调用actions直接修改state,Actions是唯一可以修改state的东西,并且可能有副作用,副作用是修改完之后,会激起一些计算属性的更新。
state是可观测的(@observable),不能包含冗余或者推导数据,可以是数组啊,类啊,等等。
Computed类似于vue中的计算属性。
Reactions当观察的东西发生变化,就可以做一些事情。 在store里面去映射一个函数,这个函数会根据原有的值进行自动响应式的修改,返回一个新值。最后触发一个Reactions,类似于redux的subscribe,给reactions传两个函数,第一个函数是我检测的变量的列表,或者state列表,第二个函数就是要检测变化的回调函数,可以再去调Actions,做新的触发。
因为store要返回全新的,所以适合用immitable。vueX
action、mutation、state、component。
它自动做了响应式处理,不像redux需要订阅。装饰器:@action和@observable增强原有的类或方法的能力,类似于高阶组件。
1安装yarn add mobx
2.observbale 把我们的数据源变成可观测的,数据实现响应。
ES6的装饰器在react中有时不支持,要安装插件
()写法一:
数组、对象、ES6中的map等都可以变成可观察的。
例:写一个可观测的数组:const arr = observable (['a','b'])
数值不可观察。
如果想让数值变成可观察的,使用box()或get()、set()
cosnt num = observable.box()
num.value =
()写法二:必须要写在类中
@observable
const arr = ['a','b']import {observable} from "mobx" //可观察的
export default()=>{
const arr = observable(["a","b"]) //响应式
const obj = observable({x:,y:})
console.log(arr) //打印结果如下 略
console.log(obj) //打印结果如下图2. 略
console.log(Array.isArray(arr)) //打印true,证明还是数组。 return null
}2.弹射
目的:自己可以做深度的webpack配置。这个过程是不可逆的。
控制台输出:yarn ejext
3.安装支持装饰器的插件(typescript下的项目不需要装)
yarn add babel-plugin-tranform-decorators-legacy(不一定行)4.decorators装饰器
export default class Mobx extends Component{
@observable
arr = ['a','b'] //这时arr成为类里面的属性,就可以当成一个可观察的对象去引用了/
render(){
console.log(this.arr)
return null
} }5.(@)computed 计算属性,可以当作装饰器用,也可以当方法用。
(1)computed作为函数。(写在render中)export default class Mobx extends Component{
@observable
name = "xinya"
render(){
cosnt otherName = computed(()=>{
return this.name
})
otherName.observe((changeValue)=>{ //检测变量变化,changeValues是一个对象,里面有newValue和oldValue
console.log(changeValue.newValue)
})
this.name = "kaiqin"
return null
} }(2)@computed 计算属性作为装饰器,必须在函数前面加get,它不需要调用,可以直接读取。
export default class Mobx extends Component{
@observable
name = "xinya"
@computed
get otherName(){
return this.name +"!!"
}
render(){
autorun(()=>{ //会检测name变化,即使没有变化,也会打印一次。根据依赖值变化自动执行,不管有没有变化,刚开始都会执行一次。
console.log(this.name+"!!")
})
setTimeOut(()=>{
this.name = "kaiqin"
this.otherName
},) return null
} }6.when只执行一次
when有两个参数,都是回调函数,当第一个参数返回true的时候,第二个参数才会执行。7.Reaction 第二个回调函数的参数data,是第一个回调函数的返回值。
第一个参数是函数,有返回值data。第二个参数也是一个函数,这个函数又有两个参数,第一个参数是前面的返回值data,第二个参数是reaction。
和autorun的不同点是reaction第一次不执行,只有修改之后执行。reaction(()=>{
return this.name
},(data)=>{
console.log(data) //shaojun
})setTimeout(()=>{
this.name = "shaojun"
this.age =
})8.@action 就是一个函数
@computed
get myJoin(){
return this.name + this.age
}
@action
printValue(){
console.log(this.myJoin) //调用计算属性不用加括号
}
render(){
setTimeOut(()=>{
this.printValue()
},100)
}
9.案例10.将mobx和react结合,使所有组件都被注入了store
安装yarn add mobx-redux
import {Provider } from "mobx-react"
import {inject} from "mobx-react" //类似与connect
@inject('store')
<Provider store={store}>
<Home>
<Provider>
//在自文件中runInAction
可以跟踪值的变化 - 凯琴10:251.mobx状态管理
安装:creact-react-app mobxaction、store、reducer。
action是一个函数,事件调用actions直接修改state,Actions是唯一可以修改state的东西,并且可能有副作用,副作用是修改完之后,会激起一些计算属性的更新。
state是可观测的(@observable),不能包含冗余或者推导数据,可以是数组啊,类啊,等等。
Computed类似于vue中的计算属性。
Reactions当观察的东西发生变化,就可以做一些事情。
在store里面去映射一个函数,这个函数会根据原有的值进行自动响应式的修改,返回一个新值。最后触发一个Reactions,类似于redux的subscribe,给reactions传两个函数,第一个函数是我检测的变量的列表,或者state列表,第二个函数就是要检测变化的回调函数,可以再去调Actions,做新的触发。
因为store要返回全新的,所以适合用immitable。
vueX
action、mutation、state、component。
它自动做了响应式处理,不像redux需要订阅。装饰器:@action和@observable增强原有的类或方法的能力,类似于高阶组件。
1安装
yarn add mobx2.observbale 把我们的数据源变成可观测的,数据实现响应。
ES6的装饰器在react中有时不支持,要安装插件
(1)写法一:
数组、对象、ES6中的map等都可以变成可观察的。
例:写一个可观测的数组:const arr = observable (['a','b'])
数值不可观察。
如果想让数值变成可观察的,使用box()或get()、set()
cosnt num = observable.box(9)
num.value = 10(2)写法二:必须要写在类中
@observable
const arr = ['a','b']import {observable} from "mobx" //可观察的
export default()=>{
const arr = observable(["a","b"]) //响应式
const obj = observable({x:0,y:1})console.log(arr) //打印结果如下
console.log(obj) //打印结果如下图2.
console.log(Array.isArray(arr)) //打印true,证明还是数组。
return null
}
1.
详情见ES6的proxy。
2.2.弹射
目的:自己可以做深度的webpack配置。这个过程是不可逆的。控制台输出:yarn ejext
3.安装支持装饰器的插件(typescript下的项目不需要装)
yarn add babel-plugin-tranform-decorators-legacy(不一定行)4.decorators装饰器
export default class Mobx extends Component{
@observable
arr = ['a','b'] //这时arr成为类里面的属性,就可以当成一个可观察的对象去引用了/
render(){
console.log(this.arr)
return null
}
}5.(@)computed 计算属性,可以当作装饰器用,也可以当方法用。
(1)computed作为函数。(写在render中)export default class Mobx extends Component{
@observable
name = "xinya"
render(){
cosnt otherName = computed(()=>{
return this.name
})
otherName.observe((changeValue)=>{ //检测变量变化,changeValues是一个对象,里面有newValue和oldValue
console.log(changeValue.newValue)
})
this.name = "kaiqin"
return null
}
}
(2)@computed 计算属性作为装饰器,必须在函数前面加get,它不需要调用,可以直接读取。export default class Mobx extends Component{
@observable
name = "xinya"@computed
get otherName(){
return this.name +"!!"
}
render(){
autorun(()=>{ //会检测name变化,即使没有变化,也会打印一次。根据依赖值变化自动执行,不管有没有变化,刚开始都会执行一次。
console.log(this.name+"!!")
})
setTimeOut(()=>{
this.name = "kaiqin"
this.otherName
},1000)
return null
}
}
6.when只执行一次
when有两个参数,都是回调函数,当第一个参数返回true的时候,第二个参数才会执行。7.Reaction 第二个回调函数的参数data,是第一个回调函数的返回值。
第一个参数是函数,有返回值data。第二个参数也是一个函数,这个函数又有两个参数,第一个参数是前面的返回值data,第二个参数是reaction。
和autorun的不同点是reaction第一次不执行,只有修改之后执行。reaction(()=>{
return this.name
},(data)=>{
console.log(data) //shaojun
})setTimeout(()=>{
this.name = "shaojun"
this.age =
})8.@action 就是一个函数
@computed
get myJoin(){
return this.name + this.age
}@action
printValue(){
console.log(this.myJoin) //调用计算属性不用加括号
}render(){
setTimeOut(()=>{
this.printValue()
},100)}
9.案例
10.将mobx和react结合,使所有组件都被注入了store
安装yarn add mobx-reduximport {Provider } from "mobx-react"
import {inject} from "mobx-react" //类似与connect@inject('store')
<Provider store={store}>
<Home>
<Provider>
//在自文件中runInAction
可以跟踪值的变化
mobx使用的更多相关文章
- mobx @computed的解读
写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留 ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- mobx源码解读3
计算属性 function Todo() { this.id = Math.random() mobx.extendObservable(this, { aaa: 222, bbb: 11, ccc: ...
- mobx源码解读4
这节介绍一下mobx的变动因子的稳定性. mobx整个系统是由ObservableValue, ComputedValue, Reaction这三个东西构建的 ObservableValue 是最小的 ...
- mobx源码解读2
我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...
- mobx源码解读1
mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
Applications are driven by state. Many things, like the user interface, should always be consistent ...
- mobx react
目录结构: Model/index.js 'use strict'; import { action, autorun, observable, computed } from "mobx& ...
- Mobx使用详解
Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. 本教程旨在介绍其用法及概念,并重点介绍其与Reac ...
- React框架 dva 和 mobx 的使用感受
最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限.在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端 ...
随机推荐
- 在Linux上实现Python调用C语言函数
一般思路 Python中内置ctypes库,需调用c编译成的.so文件来实现函数调用. 假设我们所需调用的c文件名为test.c,文件里有我们需要的函数func(x,y). 将.c文件编译成 .so文 ...
- 【VS开发】循序渐进学习使用WINPCAP(一)
winpcap教程 中文教程 http://www.ferrisxu.com/WinPcap/html/index.html 除此之外, WinPcap · Developer Resources下载 ...
- Android基础内容提供者ContentProvider的使用详解(转)
1.什么是ContentProvider 首先,ContentProvider(内容提供者)是android中的四大组件之一,但是在一般的开发中,可能使用的比较少. ContentProvider为不 ...
- python 并发编程 多线程 线程queue
线程queue 线程之间已经是共享数据的,为什么还使用线程queue? 线程需要自己加锁,线程queue帮我们处理好加锁的问题 有三种不同的用法 第一种方法: class queue.Queue(ma ...
- FTP服务器的搭建(CentOS 7)
注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...
- 从window 的cmd窗口中下载linux 服务器上文件
下载linux 服务器上的文件 down.php 格式为 pscp linux服务器上用户名@linux 服务器ip 文件在windows系统上的绝对路径 如果是下载服务器上的某个目录,只要在ps ...
- shell基础#1
shell:能直接调用命令(python)1.bash的基本特性 ctrl+L 清屏2.IO重定向与管道符 都由shell提供 命令是一个可执行的二进制程序3.编程基础 编程原理 程序:执行某个功能的 ...
- 使用CefSharp在.NET中嵌入Google kernel
原文:使用CefSharp在.NET中嵌入Google kernel 使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分 ...
- Jquery复习(六)之remove()易忘点和trigger()
过滤被删除的元素 jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤. 该参数可以是任何 jQuery 选择器的语法. 下面的例子删除 class="italic ...
- c# 模拟post登录
使用模拟登录大致可以分为两步 一.post登录获取cookis public CookieContainer GetCookie(string url,string account,string pa ...