@ observable
装饰器可以在 ES7 或者 TypeScript 类属性中属性使用，将其转换成可观察的。 @observable 可以在实例字段和属性 getter 上使用。
@ observer
observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。
action
用法:
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
任何应用都有动作。动作是任何用来修改状态的东西。 使用MobX你可以在代码中显式地标记出动作所在的位置。 动作可以有助于更好的组织代码。
定时器示例
states.js
import { observable, action } from 'mobx'
class States {
@observable timer = null;
@observable secend = 0;
@action
add = () => {
this.secend++
}
}
export default new States()
index.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { observer } from "mobx-react/native";
import states from './states'
@observer
export default class Index extends Component {
componentDidMount(){
states.timer = setInterval( () => { states.add() }, 1000 )
}
componentWillUnmount(){
clearInterval(states.timer);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>{states.secend}</Text>
</View>
);
}
}
