上海天局信息技术有限责任公司

网站首页 > 天局论坛 > RN

React native Mobx

2018-04-20 13:00:13 上海天局信息技术有限责任公司 已读

下面只是记录下我的学习和一些简单的使用:

需要引入的库:

"mobx": "^4.2.0",
"mobx-react": "^5.0.0",

 npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

.babelrc

{
  [][]
}


一.计数器的Mobx实现 :

AppState.js实现:这里主要是监听属性变化.

复制代码
import { observable,computed,autorun,action,useStrict } from 'mobx';// useStrict(true);//这里用到了严格模式,在修改类的成员属性的时候函数前面需要加上 @action
 class AppState {

@observable timer = 0;// 注意这里不能调用super(props),否则报错constructor(props) {// 一秒递增
        setInterval(()=>{this.timer += 1;
}, 1000);
}// 重置计数器resetTimer() {this.timer = 0;
}
}

export default AppState;
复制代码

模块使用:

复制代码
import AppState         from './mobx/appState';


import {observer} from 'mobx-react';

const APPState = new AppState();
@observer


export default class WeaLinkHome extendsBasePage {

renderPage() {
return (

    <PageView fromPage={this} {...this.state}
              renderSectionHeader={this.renderHeader.bind(this)}>
<Text>
当前的值是: {
            APPState.timer
}

        </Text>
        }
}
复制代码

二.总结:

1> State状态:

state即数据,包括从服务端获取的数据,本地控制组件状态的数据.

2> @Action:

action就是改变state的代码。action就像是一个用户在单元格里输入一个新值。

明确定义你的action,这可以让你的代码结构更加清晰。在严格模式下,修改state的函数如果没有包裹在actions内,Mobx就不会执行state的修改操作。

换句话说,就是修改state的函数最好包裹在action内,这样可以让你清楚的知道什么地方是在修改状态,方便维护和调试。

3> 常用关键字:<暂时只了解和学习了这些>

@observale 修饰器或者 observable 函数让对象可以被追踪,用来观测一个数据,这个数据可以数字、字符串、数组、对象等类型;
@computed 修饰器创造了自动运算的表达式;
@autorun 函数让依靠 observable 的函数自动执行,当观测到的数据发生变化的时候,如果变化的值处在autorun中,那么autorun就会自动执行.这个用来写 log,发请求很不错;
@observer 修饰器让React Native组件自动起来,它会自动更新,即便是在一个很大的程序里也会工作的很好;需要注意的是如果组件采用封装,子组件也需要@observer

使用MobX的要领:

1.定义你的状态并让它变为可观察的;

2.创建能响应状态变化的视图;

3.修改状态.


Powered by MetInfo 5.3.17 ©2008-2021 www.metinfo.cn