mobx6 基本使用demo

state类 ，action只对当前函数有效，，对嵌套调用的函数无效，需要使用runAction包裹

import {observable,action,computed,makeObservable} from 'mobx'

class UserState{
    constructor() {
        makeObservable(this);
    }
    @observable
    name = "aaaa";
    @observable
    age = 1;
    @computed
    get info(){
        return this.name+":"+this.age;
    }
    @action
    changeName(newName){
        this.name = newName;
    }

    @action
    changeAge(){
        this.age++
    }
}
const userState = new UserState();
export default userState;

在view中使用state

 1 纯函数组件

import { inject, observer } from 'mobx-react';
const App = ({ userState}) => {
  console.log(userState.name)
  console.log(userState.age)
}

export default inject('userState')(observer(App));

  1 类组件

import React from 'react'
import {inject,observer} from 'mobx-react'
import {Button} from 'antd'
@inject('userState')
@observer
class UserView extends React.Component{
    constructor(props) {
        super(props);
        this.test = this.test.bind(this);
    }
    test(){
        this.props.userState.changeName("test");
    }
    test1 = ()=>{
        this.props.userState.changeName("test1");
    }
    render() {
        return(
            <div>
                <Button onClick={this.test1}>name</Button>
                <Button onClick={this.test}>name</Button>
                <Button onClick={()=>{
                    this.props.userState.changeName("name1")
                }}>name</Button>
                <Button onClick={()=>{
                    this.props.userState.changeAge();
                    console.log(this.props.userState.age)
                    console.log(this.props.userState.name)
                }}>name</Button>
                <div>

                    {this.props.userState.age}
                    {this.props.userState.name}
                </div>
            </div>
        )
    }
}
export default UserView;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import UserView from "./component/UserView";
import userState from "./state/UserState";
import{Provider} from 'mobx-react'
import reportWebVitals from './reportWebVitals';
const states = {
    userState
};
ReactDOM.render(
    <Provider {...states}>
  <React.StrictMode>
    <UserView />
  </React.StrictMode>
    </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();