Mobx
Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库。
浏览器支持
-
- MobX 4 和 5 的 API 是相同的,并且语义上也能达到相同的效果,只是 MobX 4 存在一些 局限性。
一、使用 MobX 将一个应用变成响应式
1. 定义状态并使其可观察
可以用任何你喜欢的数据结构来存储状态,如对象、数组、类。 循环数据结构、引用,都没有关系。 只要确保所有会随时间流逝而改变的属性打上 mobx
的标记使它们变得可观察即可。
import {observable} from 'mobx';
var appState = observable({
timer: 0
});
2. 创建视图以响应状态的变化
当 appState
中相关数据发生改变时视图会自动更新。 MobX 会以一种最小限度的方式来更新视图。
通常来说,任何函数都可以成为可以观察自身数据的响应式视图,MobX 可以在任何符合ES5的JavaScript环境中应用。 但是在这所用的示例是 ES6版本的 React 组件视图。
import {observer} from 'mobx-react';
@observer
class TimerView extends React.Component {
render() {
return (
<button onClick={this.onReset.bind(this)}>
Seconds passed: {this.props.appState.timer}
</button>
);
}
onReset() {
this.props.appState.resetTimer();
}
};
ReactDOM.render(<TimerView appState={appState} />, document.body);
3. 更改状态
下面的代码每秒都会修改你的数据,而当需要的时候UI会自动更新。 无论是在改变状态的控制器函数中,还是在应该更新的视图中,都没有明确的关系定义。 使用 observable
来装饰你的状态和视图,这足以让 MobX检测所有关系了。
appState.resetTimer = action(function reset() {
appState.timer = 0;
});
setInterval(action(function tick() {
appState.timer += 1;
}), 1000);
只有在严格模式(默认是不启用)下使用 MobX 时才需要 action
包装。 建议使用 action,因为它将帮助你更好地组织应用,并表达出一个函数修改状态的意图。
二、概念
MobX 区分了以下几个应用中的概念。 在之前的要点中已经见过了,现在让我们更深入地了解它们。
1. State(状态)
状态 是驱动应用的数据。 通常有像待办事项列表这样的领域特定状态,还有像当前已选元素的视图状态。 记住,状态就像是有数据的excel表格。
2. Derivations(衍生)
任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 衍生以多种形式存在:
- 用户界面
- 衍生数据,比如剩下的待办事项的数量。
- 后端集成,比如把变化发送到服务器端。
MobX 区分了两种类型的衍生:
- Computed values(计算值) - 从当前可观察状态中衍生出的值,即计算值是根据state推导计算出来的值;。
- Reactions(反应) - 响应,受state影响,会对state的变化做出一些更新ui、打印日志等反应;
黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed
。
3. Actions(动作)
动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。 动作类似于用户在excel单元格中输入一个新的值。
在 MobX 中可以显式地定义动作,它可以帮你把代码组织的更清晰。 如果是在严格模式下使用 MobX的话,MobX 会强制只有在动作之中才可以修改状态。
三、原则
MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图。
当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。
计算值 是延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。
所有的计算值都应该是纯净的。它们不应该用来改变状态。
四、实例
下面的代码清单举例说明了以上的概念和原则:
import {observable, autorun} from 'mobx';
var todoStore = observable({
/* 一些观察的状态 */
todos: [],
/* 推导值 */
get completedCount() {
return this.todos.filter(todo => todo.completed).length;
}
});
/* 观察状态改变的函数 */
autorun(function() {
console.log("Completed %d of %d items",
todoStore.completedCount,
todoStore.todos.length
);
});
/* ..以及一些改变状态的动作 */
todoStore.todos[0] = {
title: "Take a walk",
completed: false
};
// -> 同步打印 'Completed 0 of 1 items'
todoStore.todos[0].completed = true;
// -> 同步打印 'Completed 1 of 1 items'
Copy
五、装饰器
修饰器是一个对类进行处理的函数。
基本语法
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
返回函数为修饰器传参
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
添加实例属性
function testable(target) {
target.prototype.isTestable = true;
}
@testable
class MyTestableClass {}
let obj = new MyTestableClass();
obj.isTestable // true
实例:mixins
// mixins.js
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js
import { mixins } from './mixins'
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'
属性的修饰
属性修饰器的参数:
-
第一个参数是类的原型对象,上例是
Person.prototype
修饰器的本意是要“修饰”类的实例,但是这个时候实例还没生成,所以只能去修饰原型(这不同于类的修饰,那种情况时target
参数指的是类本身) -
第二个参数是所要修饰的属性名
-
第三个参数是该属性的描述对象
更多:https://segmentfault.com/a/1190000013051904
六、Mobx:observable
什么是 Observable?
Observable 是一种让数据的变化可以被观察的方法。
哪些数据可被观察?
-
原始类型
-
对象
-
数组
-
。。。
标记observable的三种方式总结
1: 使用@observable
import { observable, computed } from "mobx"
class OrderLine {
@observable price = 0
@observable amount = 1
constructor(price) {
this.price = price
}
@computed get total() {
return this.price * this.amount
}
}
2: 使用observable()
import { observable } from "mobx"
let person = observable({name: 'emma', weight: 50})
3: 使用decorate()
import { decorate, observable, computed } from "mobx"
class Person {
name = "John"
age = 42
showAge = false
get labelText() {
return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
}
setAge(age) {
this.age = age;
}
}
// 使用 decorate 时,所有字段都应该指定
decorate(Person, {
name: observable,
age: observable,
showAge: observable,
labelText: computed,
setAge: action
})
七、Mobx:对可观察的数据做出响应
-
computed
-
autorun
-
- 语法
-
- 一上来就执行一次
-
- 修改 autorun 中依赖的任意可观察数据都会导致aoturun的自动执行
-
- computed 数据也可以被观察
-
when
-
- 语法:第一个参数是一个函数,改函数返回一个条件布尔值,布尔值为 true,指定第二个函数,布尔值为 false,则不执行,而且保证只执行一次
-
- 注意:必须根据可观察数据计算条件
-
- 执行机制
-
reaction
-
- 使用场景:在没有数据之前,不需要写缓存,可以利用 reaction 在数据第一次被填充之后执行写缓存的逻辑
computed
如果使用了@computed get getValue,那么getValue将会被缓存,如果value没有改变,那么getValue也不会改变,其它组件也不会收到通知。
此外如果读取getValue的值,通常会得到一个缓存的值,而不带@computed装饰器,则会重新计算……
import {observable, computed} from "mobx";
class OrderLine {
@observable price = 0;
@observable amount = 1;
constructor(price) {
this.price = price;
}
@computed get total() {
return this.price * this.amount;
}
}
引入computed的4种方式
1:使用@computed
import { observable, computed } from "mobx"
class OrderLine {
@observable price = 0;
@observable amount = 1;
constructor(price){
this.price = price;
}
@computed get total(){
return this.price * this.amount;
}
}
2: 使用computed
import {observable, computed} from 'mobx'
let numbers = observable([1, 2, 3])
let sum = computed(()=>numbers.reduce((a, b)=>a + b, 0))
3: 使用decorate
import { observable, computed, decorate } from "mobx"
class OrderLine {
price = 0;
amount = 1;
constructor(price){
this.price = price;
}
get total(){
return this.price * this.amount;
}
}
decorate(OrderLine, {
price: observable,
amount: observable,
total: computed
});
4:默认是computed的情况
observable.object和extendObservable会自动把getter属性标记为computed:
import { observable, computed, decorate } from "mobx"
const OrderLine = observable.object({
price: 0,
amount: 1,
get total(){
return this.price * this.amount;
}
})
autorun
当使用 autorun
时,所提供的函数总是立即被触发一次,然后每次它的依赖关系改变时会再次被触发。 相比之
下,computed(function)
创建的函数只有当它有自己的观察者时才会重新计算,否则它的值会被认为是不相关的。
经验法则:如果你有一个函数应该自动运行,但不会产生一个新的值,请使用autorun
。 其余情况都应该使用 computed
。
class store{
@observable count = 0;
@observable foo ='bar'
}
const store = new Store();
autorun(() => {
console.log('autorun:',store.count)
})
store.count = 10
store.foo = 'hello'
//执行结果如下:
autorun: 0
autorun:10
observable可以用来观测一个数据,这个数据可以数字、字符串、数组、对象等类型,而当观测到的数据发生变化的时候,如果变化的值处在autorun中,那么autorun就会自动执行。
上例中的autorun函数中,只对count值进行了操作,所以store.foo = 'hello’这步并不会触发autorun,只有count的变化才触发了autorun。
class store{
@observable count = 0;
@observable foo ='bar'
}
const store = new Store();
autorun(() => {
console.log('autorun:',store.count,store.foo)
})
store.count = 10
store.foo = 'hello'
//执行结果如下:
autorun: 0 bar
autorun:10 bar
autorun: 10 hello
频繁执行autorun,数据量大时不合理
解决方法:
class store{
@observable count = 0;
@observable foo ='bar'
@action change() {
this.count = 10;
this.foo = 'hello'
}
}
const store = new Store();
autorun(() => {
console.log('autorun:',store.count,store.foo)
})
store.change()
//执行结果如下:
autorun: 0 bar
autorun: 10 hello
强制必须使用action装饰的函数修改observable的值
import { configure } from 'mobx';
configure({
enforceActions: 'observed'
})
when
when(predicate: () => boolean, effect?: () => void, options?)
when
观察并运行给定的 predicate
,直到返回true。 一旦返回 true,给定的 effect
就会被执行,然后 autorunner(自动运行程序) 会被清理。 该函数返回一个清理器以提前取消自动运行程序。
对于以响应式方式来进行处理或者取消,此函数非常有用。 示例:
class MyResource {
constructor() {
when(
// 一旦...
() => !this.isVisible,
// ... 然后
() => this.dispose()
);
}
@computed get isVisible() {
// 标识此项是否可见
}
dispose() {
// 清理
}
}
Copy
class store{
@observable count = 0;
}
const store = new Store();
//当count>100时,只执行一次自定义逻辑
when(
() => {
return store.count > 100;
},
() => {
console.log("when:",store.count);
}
)
reaction
用法: reaction(() => data, (data, reaction) => { sideEffect }, options?)
。
autorun
的变种,对于如何追踪 observable 赋予了更细粒度的控制。 它接收两个函数参数,第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。 不同于 autorun
的是当创建时效果 函数不会直接运行,只有在数据表达式首次返回一个新值后才会运行。 在执行 效果 函数时访问的任何 observable 都不会被追踪。
reaction
返回一个清理函数。
传入 reaction
的第二个函数(副作用函数)当调用时会接收两个参数。 第一个参数是由 data 函数返回的值。 第二个参数是当前的 reaction,可以用来在执行期间清理 reaction
不同于autorun和when,只有当被观测的数据发生改变时才执行,先执行第一个函数,把第一个函数返回的结果传给第二个函数,data为第一个函数的返回值。第二个参数reaction表示当前函数本身。
reaction(
() => {
//执行一些业务逻辑操作,返回数据给下一个函数使用
return store.count;
},
(data, reaction) => {
console.log("data:",data);
//手动停止当前reaction的监听
reaction.dispose();
}
)
八、Mobx:改变 observables
Action
-
action
mobx推荐将修改被观测变量的行为放在action中。
例子:
import {observable, action} from 'mobx'; class Store { @observable number = 0; @action add = () => { this.number++; } } const newStore = new Store(); newStore.add();
好了回到我们的例子,这个类中有一个add函数,用来将number的值加1,也就是修改了被观测的变量,根据规范,我们要在这里使用action来修饰这个add函数。
就算我把@action去掉,程序还是可以运行。
class Store { @observable number = 0; add = () => { this.number++; } }
这是因为现在我们使用的Mobx的非严格模式,如果在严格模式下,就会报错了。
接下来让我们来启用严格模式import {observable, action, useStrict} from 'mobx'; useStrict(true); class Store { @observable number = 0; @action add = () => { this.number++; } } const newStore = new Store(); newStore.add();
Mobx里启用严格模式的函数是useStrict,注意和原生JS的"use strict"不是一个东西。
现在再去掉@action就会报错了。
实际开发的时候建议开起严格模式,这样不至于让你在各个地方很轻易地区改变你所需要的值,降低不确定性。 -
action.bound
action.bound
可以用来自动地将动作绑定到目标对象。,保证this永远指向容器的实例对象class store{ @observable count = 0; @observable foo ='bar' @action.bound change() { console.log(this) } } const store = new Store(); autorun(() => { console.log('autorun:',store.count,store.foo) }) const change = store.change; change(); //执行结果如下: Store{change: f, Symbol(mobx did run ...)} //去掉.bound后执行结果 undefined
注意: *action.bound* 不要和箭头函数一起使用;箭头函数已经是绑定过的并且不能重新绑定。
-
runInAction
它接收代码块并在(异步的)动作中执行。这对于即时创建和执行动作非常有用,例如在异步过程中。
runInAction(f)
是action(f)()
的语法糖。class store{ @observable count = 0; @observable foo ='bar' @action.bound change() { console.log(this) } } const store = new Store(); autorun(() => { console.log('autorun:',store.count,store.foo) }) runInAction(() => { store.count = 10; store.foo = 'hello' }) //执行结果如下: autorun: 0 bar autorun: 10 hello
-
异步action
-
action只能影响正在运行的函数,而无法影响当前函数调用的异步操作
开启action严格模式后,不允许在异步的回调函数中对容器状态进行修改。
class store{ @observable count = 0; @observable foo ='bar' @action.bound change() { console.log(this) } /*错误用法 @action.bound asyncChange() { setTimeout(() => { this.count = 100; },100) } */ //方法一 @action.bound asyncChange() { setTimeout(() => { this.changeCount(); },100) } @action.bound changeCount() { this.count = 20; } //方法二 @action.bound asyncChange() { setTimeout(() => { //定义一个名称为changeFoo的action函数并立即执行 action('changeFoo',() => { this.foo = 'hello' })(); },100) } //方法三 @action.bound asyncChange() { setTimeout(() => { //定义一个名称为changeFoo的action函数并立即执行 runInAction(() => { this.foo = 'hello' }); },100) } } const store = new Store(); store.asyncChange();
Mobx官网实例:
@action createRandomContact() {
this.pendingRequestCount++;
superagent
.get('https://randomuser.me/api/')
.set('Accept', 'application/json')
.end(action("createRandomContact-callback", (error, results) => {
if (error)
console.error(error);
else {
const data = JSON.parse(results.text).results[0];
const contact = new Contact(this, data.dob, data.name, data.login.username, data.picture);
contact.addTag('random-user');
this.contacts.push(contact);
this.pendingRequestCount--;
}
}));
}
重点关注程序的第六行。在end中触发的回调函数,被action给包裹了,这就很好验证了上面加粗的那句话,action无法影响当前函数调用的异步操作,而这个回调毫无疑问是一个异步操作,所以必须再用一个action来包裹住它,这样程序才不会报错。。
使用async function来处理业务,那么我们可以使用runInAction这个API来解决之前的问题。
import {observable, action, useStrict, runInAction} from 'mobx';
useStrict(true);
class Store {
name = '';
load = async () => {
const data = await getData();
runInAction(() => {
this.name = data.name;
});
}
}
九、结合React使用
在React中,我们一般会把和页面相关的数据放到state中,在需要改变这些数据的时候,我们会去用setState这个方法来进行改变。
先设想一个最简单的场景,页面上有个数字0和一个按钮。点击按钮我要让这个数字增加1,就让我们要用Mobx来处理这个试试。
import React from 'react';
import { observable, useStrict, action } from 'mobx';
import { observer } from 'mobx-react';
useStrict(true);
class MyState {
@observable num = 0;
@action addNum = () => {
this.num++;
};
}
const newState = new MyState();
@observer
export default class App extends React.Component {
render() {
return (
<div>
<p>{newState.num}</p>
<button onClick={newState.addNum}>+1</button>
</div>
)
}
}
上例中我们使用了一个MyState类,在这个类中定义了一个被观测的num变量和一个action函数addNum来改变这个num值。
之后我们实例化一个对象,叫做newState,之后在我的React组件中,我只需要用@observer修饰一下组件类,便可以使用这个
newState对象中的值和函数了。
跨组件交互
在不使用其它框架、类库的情况下,React要实现跨组件交互这一功能相对有些繁琐。通常我们需要在父组件上定义一个state和一个修改该state的函数。然后把state和这个函数分别传到两个子组件里,在逻辑简单,且子组件很少的时候可能还好,但当业务复杂起来后,这么写就非常繁琐,且难以维护。而用Mobx就可以很好地解决这个问题。来看看以下的例子:
class MyState {
@observable num1 = 0;
@observable num2 = 100;
@action addNum1 = () => {
this.num1 ++;
};
@action addNum2 = () => {
this.num2 ++;
};
@computed get total() {
return this.num1 + this.num2;
}
}
const newState = new MyState();
const AllNum = observer((props) => <div>num1 + num2 = {props.store.total}</div>);
const Main = observer((props) => (
<div>
<p>num1 = {props.store.num1}</p>
<p>num2 = {props.store.num2}</p>
<div>
<button onClick={props.store.addNum1}>num1 + 1</button>
<button onClick={props.store.addNum2}>num2 + 1</button>
</div>
</div>
));
@observer
export default class App extends React.Component {
render() {
return (
<div>
<Main store={newState} />
<AllNum store={newState} />
</div>
);
}
}
有两个子组件,Main和AllNum (均采用无状态函数的方式声明的组件)
在MyState中存放了这些组件要用到的所有状态和函数。
之后只要在父组件需要的地方实例化一个MyState对象,需要用到数据的子组件,只需要将这个实例化的对象通过props传下去就好了。
那如果组件树比较深, 则可以借助React15版本的新特性context
来完成。它可以将父组件中的值传递到任意层级深度的子组件中。
网络请求
useStrict(true);
class MyState {
@observable data = null;
@action initData = async() => {
const data = await getData("xxx");
runInAction("说明一下这个action是干什么的。不写也可以", () => {
this.data = data;
})
};
}
严格模式下,只能在action中修改数据,但是action只能影响到函数当前状态下
的情景,也就是说在await之后发生的事情,这个action就修饰不到了,于是我们必须要使用了runInAction。
开启严格模式可以防止数据被任意修改,降低程序的不确定性*
React组件中可以直接添加@observable修饰的变量
@observer
class MyComponent extends React.Component {
state = { a: 0 };
@observable b = 1;
render() {
return(
<div>
{this.state.a}
{this.b}
</div>
)
}
}
在添加@observer后,你的组件会多一个生命周期componentWillReact
。当组件内被observable观测的数据改变后,就会触发这个生命周期。
注意setState并不会触发这个生命周期!state中的数据和observable数据并不算是一类。
另外被observable观测数据的修改是同步的,不像setState那样是异步,这点给我们带了很大便利。
十、Observable Object和Observable Arrays
Observable Objects
如果使用observable来修饰一个Javascript的简单对象,那么其中的所有属性都将变为可观察的,如果其中某个属性是对象或者数组,那么这个属性也将被observable进行观察(递归调用)。
Tips: 简单对象是指不由构造函数创建,而是使用Object作为其原型,或是干脆没有原型的对象。
需要注意,只有对象上已经存在的属性,才能被observable所观测到。
若是当时不存在,后续添加的属性值,则需要使用extendObservable
来进行添加。
let observableObject = observable({value: 3222});
extendObservable(observableObject, {
newValue: 2333
});
如果是由构造函数创建的对象,那么必须要再它的构造函数中使用observable或extendObservable来观测对象。
如下所示:
function MyObject(name) {
extendObservable(this, {
name,
});
}
var obj = new MyObject("aaa");
如果对象中的属性是由构造函数创建的对象,那么它也不会被observable给转化。
对象中带有getter修饰的属性会被computed自动转换。
Observable Arrays
与对象类似,数组同样可以使用observable函数进行转化。
考虑到ES5中原生数组对象中存在一定的限制,所以Mobx将会创建一个类数组对象来代替原始数组。在实际使用中,这些类数组的表现和真正的原生数组极其类似,并且它支持原生数组的所有API,包括数组索引、长度获取等。
但是注意一点,sort和reverse方法返回的是一个新的Observable Arrays,对原本的类数组不会产生影响,这一点和原生数组不一样。
请记住,这个类数组不管和真实的数组有多么相似,它都不是一个真正的原生数组,所以毫无疑问Array.isArray(observable([]))的返回值都是false。
当你需要将这个Observable Arrays转换成真正的数组时,可以使用slice方法创建一个浅拷贝。换句话来说,Array.isArray(observable([]).slice())会返回true。
除了原生数组支持的API外,Observable Arrays还支持以下API:
- intercept(interceptor)
这个方法可以在所有数组的操作被应用之前,将操作拦截。 - observe(listener, fireImmediately? = false)
用来监听数组的变化(类似ES7中的observe,可惜这个ES7中的observe将被废弃),它返回一个用以注销监听器的函数。 - clear()
清空数组 - replace(newArray)
用一个新数组中的内容来替换掉原有的内容 - find(predicate: (item, index, array) => boolean, thisArg?, fromIndex?)
基本上与ES7 Array.find的提案相同,不过多了fromIndex参数。 - remove(value)
移除数组中第一个值等于value的元素,如果移除成功,则会返回true - peek()
和slice类似,但它不会创建保护性拷贝,所以性能比slice会更好。如果你能够确定,转换出的数组肯定仅以只读的方式使用,那么可以使用这个API
十一、Mobx 4/5 与Mobx 6 的区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pa9CT6mO-1664247481872)(https://sponsor.segmentfault.com/lg.php?bannerid=0&campaignid=0&zoneid=25&loc=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000037619304&referer=https%3A%2F%2Fsegmentfault.com%2Fsearch%3Fq%3Dmobx%26page%3D1&cb=032bde81ac)]
用create-react-app
搭建项目,安装了mobx@6.x
和mobx-react@6.x
,写一个使用store
例子时发现依赖store
的组件没有重新渲染。
示例:
// mobx@6.0.1
import { action, observable } from 'mobx';
class TestStore {
@observable count = 0;
@action
setValue = <T extends keyof CountStore>(key: T, value: this[T]) => {
this[key] = value;
}
}
export default {
testStore: new TestStore()
}
页面引入
import { inject, observer } from 'mobx-react';
import React from 'react';
enum Oprate {
MINUS = 'MINUS',
PLUS = 'PLUS'
}
function App(props: any) {
const {testStore} = props;
const oprate = (type: Oprate) => {
switch (type) {
case Oprate.MINUS:
testStore.setValue('count', testStore.count - 1);
break;
case Oprate.PLUS:
testStore.setValue('count', testStore.count + 1);
break;
default:
break;
}
}
return (
<div>
<button onClick={() => oprate(Oprate.MINUS)}>--</button>
<span>{testStore?.count}</span>
<button onClick={() => oprate(Oprate.PLUS)}>++</button>
</div>
);
}
export default inject('testStore')(observer(App));
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKb8n9Me-1664247481873)(https://segmentfault.com/img/bVcH0nD)]
Mobx官网例子如下:
import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"
// Model the application state.
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
increase() {
this.secondsPassed += 1
}
reset() {
this.secondsPassed = 0
}
}
const myTimer = new Timer()
// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
<button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))
ReactDOM.render(<TimerView timer={myTimer} />, document.body)
// Update the 'Seconds passed: X' text every second.
setInterval(() => {
myTimer.increase()
}, 1000)
无需通过observable
和action
等修饰器,直接在构造函数中使用makeAutoObservable
来实现observable
和action
修饰器功能,使代码更加简洁。
将上面例子改写一下就可以了
import { makeAutoObservable } from 'mobx';
class TestStore {
constructor() {
makeAutoObservable(this);
}
/*
constructor() {
makeObservable(this, {
count: observable,
setvalue: action,
});
*/
count = 0;
setValue = <T extends keyof CountStore>(key: T, value: this[T]) => {
this[key] = value;
}
}
export default {
testStore: new TestStore()
}