Skip to content

MobX

1. MobX 是什么

MobX 是一个状态管理库,它使用 observable 和 action 来管理状态,并且支持响应式数据。

2. MobX 的优势

MobX 可以非常简单的实现状态管理,并且支持响应式数据。

3. MobX 的使用

创建仓库

javascript
import {observable,action} from "mobx";
class RootStore {
  @observable name="hello";
  
  @action changeName(name){
    this.name=name
  }
}

export default new Rootstore();

在根文件挂载

javascript
import React,{Component} from 'react';
import {View} from 'react-native';
import rootStore from "./src/mobx";
import {Provider} from "mobx-react";
import Sub1 from './Sub1';

class Index extends Component{
  render(){
    return (
      <View>
        <Provider rootStore={rootStore} >
          <Sub1></Sub1>
        </Provider>
      </View>
    )
  }
}

子文件使用

javascript
import React, {Component} from 'react';
import {View,Text} from 'react-native';
import {inject,observer} from "mobx-react";

@inject("rootStore")
@observer
class Subl extends Component {
  changeName =()=> {
    this.props.rootStore.changeName(Date.now());
  }
  render(){
    return (
      <View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>
    )
  }
}
export default Index;