react mobx

全局状态管理系统(mbox):

安装:

yarn add mobx
yarn add mobx-react

store.js文件:

import {observable, computed, action, autorun,runInAction, makeObservable} from 'mobx';
class Store {
    @observable name= "xiaowang"
    //this指向,没有action函数无法触发
    constructor(){
        makeObservable(this);
    }
    @action setName=(text)=>{
        //this指向
        this.name = text
    }
}
export default Store

Router.js文件:

import React from 'react';

import { BrowserRouter } from 'react-router-dom';

import App from './App';

//这几个文件路径都是store文件

import {Provider} from 'mobx-react'

import FirstStore from './store/store'

import TwoStore from './store/twostore'

import NewStore from './store/app2'

import Store513 from './store/store513'

/*

src下新建文件夹(store

    store里写数据

    用的时候在React.js引入

    用多个时,写在对象里,属性:文件,用时调用属性

*/ 

//这样的方式方便

const stores = {

    first: new FirstStore(),

    two:new TwoStore(),

    three:new NewStore(),

    four:new Store513()
}
const Router = () => (
    <BrowserRouter>
//这个标签是新增的
        <Provider {...stores}>
            <App />
        </Provider>
    </BrowserRouter>
)

export default Router;

 

jsx文件:

import React from 'react'

import { withRouter, NavLink } from 'react-router-dom'

import { observer, inject } from 'mobx-react'

@withRouter //更新数据

@inject('three') //获取数据 可以进入多个,用,隔开

@observer //让页面变成响应式

class Top extends React.Component {

    componentDidMount(){

    }

    change({ target }) {

        const { setData } = this.props.three

        setData(target.value)
    }

    render() {

        const { name } = this.props.three

        return <div>

            {name}

            <input value={name} onChange={() => this.change()} />

        </div>

    }

}

export default Top