最简单的版本
第一步:初始化容器仓库
import {observable} from "mobx"
class Store
{
@observable count = 0;//将普通数据变为可被观测的数据
}
import {observable,action} from "mobx"
class Store
{
@observable count = 0;//将普通数据变为可被观测的数据
@action.bound increment(){ //添加一个action,修改数据状态
this.count++
}
}
第二步:在组件中使用mobx容器状态
初始版本
//1. 定义组件
class App extends React.Component{
render(){
return <div>
<h1>App Component</h1>
</div>
}
}
//2. 渲染组件
ReactDOM.render(<App />,document.getElementById('root'));
第二版 使用状态数据
//1. 定义组件
class App extends React.Component{
render(){
const {count} = this.props;
return <div>
<h1>App Component</h1>
<p>{store.count}</p>
</div>
}
}
//2. 渲染组件
//传递store对象,当做props,这样就可以在render函数中使用了
ReactDOM.render(<App store= {new Store()}/>,document.getElementById('root'));
第三版 使用action
//1. 定义组件
class App extends React.Component{
render(){
const {count} = this.props;
return <div>
<h1>App Component</h1>
<p>{store.count}</p>
<button onClick= {store.increment}> Increment </button>
</div>
}
}
//2. 渲染组件
//传递store对象,当做props,这样就可以在render函数中使用了
ReactDOM.render(<App store= {new Store()}/>,document.getElementById('root'));
第四版 关联mobx和react
//1. 定义组件
import {observer} from "mobx-react"
@observer //修改的是这里
class App extends React.Component{
render(){
const {count} = this.props;
return <div>
<h1>App Component</h1>
<p>{store.count}</p>
<button onClick= {store.increment}> Increment </button>
</div>
}
}
//2. 渲染组件
//传递store对象,当做props,这样就可以在render函数中使用了
ReactDOM.render(<App store= {new Store()}/>,document.getElementById('root'));
装饰器的种类
1. 类修饰器
//不带参数的版本
function fn(target){ //target为类定义
target.foo = "bar";
}
@fn
class MyClass {
}
console.log(MyClass.foo) // => bar
//带参数的版本
function fn2(value){
return function(target){
target.count = value
}
}
@fn2(10)
class MyClass {
}
console.log(MyClass.count) // => 10
2. 类实例对象修饰器
function fn3(target){
target.prototype.foo= "bar";
}
@fn3
class MyClass {
}
let obj = new MyClass();
console.log(MyClass.foo) // => bar
3. 类实例属性修饰器
function fn4(target,name,descriptor){
console.log(target);//target为目标类的prototype
//=> {constructor:f}
console.log(name);//name 被修饰的类成员名称
//=> message
console.log(descriptor);//descriptor 被修饰的类成员的描述对象
//=> {configurable:true,enumerable:true,writable:true,initializer:f}
descriptor.writable = false;//修改为不可写,只读
}
class MyClass {
@fn4 message = "hello";
}
4. 类实例方法修饰器和类实例属性修饰器是一样的
function fn4(target,name,descriptor){
console.log(target);//target为目标类的prototype
//=> {constructor:f}
console.log(name);//name 被修饰的类成员名称
//=> message
console.log(descriptor);//descriptor 被修饰的类成员的描述对象
//=> {configurable:true,enumerable:true,writable:true,initializer:f}
descriptor.writable = false;//修改为不可写,只读
}
class MyClass {
@fn4 test (){
console.log("hello");
}
}
理解 observable
状态改变触发事务更新
import {autorun} from 'mobx'
//autorun 根据依赖决定观测后的行为处理
const store = new Store()
//autorun 一上来会自动执行一次,然后autorun就知道了自己依赖了store.count
//当store.count发生改变,autorun会自动执行; 这里就要求store.count是可观测的
//对于不可观测的属性,只会一上来制动执行一次,后续都不会执行,因为观测不到属性的状态修改.
autorun(
()=>{
console.log(store.count);
}
);
store.count = 1; //手动修改状态,另外一种方式是通过action
理解computed
@observer
Class App extends React.Component{
render()
{
return (<p> Total: {store.price * store.count}</p>)
}
}
//该方法的缺点,计算每次渲染都会执行
//而实际上只需要依赖的数据改变,执行一次即可(缓存起来); 这里是store.price和store.count的数据改变
import {computed} from "mobx"
class Store{
@observable price = 10;
@observable count = 5;
@computed get totalPrice(){
return this.price * this.count
}
}
@observer
Class App extends React.Component{
render()
{
return (<p> Total: {store.totalPrice}</p>)
}
}
理解action
//可以手动修改observable属性
import {computed} from "mobx"
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
}
const store = new Store();
autorun( ()=>{
console.log('autorun:',store.count,store.foo,store.price)
}
)
//autorun 依赖了3个属性,下面的3次修改每一次都会触发一次autorun;
store.count = 1;// 这是直接修改的方式 , 触发了一次autorun
store.foo = 2;//触发了一次autorun
store.price = 12;//触发了一次autorun
//如何做到这3个属性的修改,只触发一次autorun呢?类似于数据库中事务的概念
//可以手动修改observable属性
import {computed} from "mobx"
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
//答案是使用action,然后在函数中修改3个变量; 这样调用change,只会触发一次autorun
@action change()
{
this.count = 2;
this.price = 12;
this.foo = 3;
}
}
const store = new Store();
autorun( ()=>{
console.log('autorun:',store.count,store.foo,store.price)
}
)
store.change()//这是通过action的修改方式
屏蔽直接修改
import {configure} from "mobx"
//修改observed属性时,必须通过action修饰的函数来进行
configure({
enforceActions:'observed'
})
//直接修改会报错
store.count = 22;
// => changing observed observable values outside actions is not allowd.
action.bound的作用:
为成员函数绑定this
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
//答案是使用action,然后在函数中修改3个变量; 这样调用change,只会触发一次autorun
@action change()
{
console.log(this);
this.count = 2;
this.price = 12;
this.foo = 3;
}
}
const change = store.change;
change(); // => 输出undefined,因为对于const change 来说,this的指向window;严格模式为undefined
runInAction 的作用
可以将多个observable成员变量的数据进行修改,但只触发一次autorun
import {runInAction} from "mobx"
runInAction( ()=>{
store.count = 111;
store.price = 222;
store.foo = 333;
}
);
异步action
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
@action asyncChange()
{//默认不允许在异步操作执行对observable数据的修改
//因为默认行为是异步操作中的动作和action修饰的函数没有任何关系
setTimeout(()=>{
this.count = 222;
},100);
}
}
const store = new Store();
store.asyncChange(); //会直接报错
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
//解决异步action方式一,添加新的action函数
@action.bound changeCount(){
this.count = 222;
}
@action.bound asyncChange()
{
setTimeout(this.changeCount(),100); //将回调函数指定为action函数
}
}
const store = new Store();
store.asyncChange(); //会直接报错
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
//解决异步action方式二,使用action函数
@action.bound asyncChange()
{
setTimeout(()=>{
action('changeFoo',()=>{
this.foo = "hello";
}) ();//定义一个叫changeFoo的函数,然后立即调用
},100);
}
}
const store = new Store();
store.asyncChange(); //会直接报错
class Store{
@observable price = 10;
@observable count = 5;
@observable foo = 1;
//解决异步action方式三,使用runInAction函数
@action.bound asyncChange()
{
setTimeout(()=>{
runInAction(()=>{
this.count = 222;
});
},100);
}
}
const store = new Store();
store.asyncChange(); //会直接报错
监测数据的几种方式
- @computed 前面已经接触过
- autorun //前面有讲过,一开始会执行一次,然后依赖的数据发生改变,重新出发执行
- when 条件触发
- reaction 当被观测的数据发生改变的时候,依次执行第一个函数,将第一个函数的返回值传给第二个函数; 与when的区别,reaction每次修改都会触发;when只执行一次; reaction不会一开始就执行一次
import {when} from "mobx"
//当count>100,只执行一次自定义逻辑
when( ()=>{
//第一个参数为函数,返回true或者false
return store.count>100;
},()=>{ //只有第一个参数的返回值为ture 的时候才执行
console.log('when:',store.count);
} )
reaction(
()=>{
//执行一些业务逻辑,返回数据给下一个函数使用
return store.count
},
(data,reaction)=>{//第一个参数为上一个函数的返回值;第二个参数为reaction函数本身
console.log("reaction :",data);
//模拟出when的操作
reaction.dispose();//手动停止当前reaction的监听
}
)
总结: 只有computed会返回数据,其他的都是用于可观测数据发生改变时,做一些业务逻辑,比如发消息给服务器.
十分钟入门mobx