mobx 的学习

 

1.初始化项目

第一步用create-react-app初始化一个项目，并打开webpack配置项

npx create-react-app react-mobx-demo

cd react-mobx-demo

npm run eject 

 

2.配置支持修饰符

目前初始化的项目是不支持修饰符的，安装相关依赖

cnpm install --save-dev @babel/plugin-proposal-decorators 
cnpm install --save-dev @babel/plugin-proposal-class-properties 

 

 

上面安装好之后，找到项目中package.json文件修改如下

"babel": {
 // 新增
 "plugins": [
 [
 "@babel/plugin-proposal-decorators",
 {
 "legacy": true
 }
 ],
 [
 "@babel/plugin-proposal-class-properties",
 {
 "loose": true
 }
 ]
 ],
 "presets": [
 "react-app"
 ]
 }, 

 

 

找到babel添加plugins就可以了’

3.安装antd和mobx

这一步没有什么特别，安装就行

yarn add antd
yarn add mobx
yarn add mobx-react

4.开发stroe,完整的代码

import {action, computed, observable} from "mobx";
import moment from 'moment';
class  Appstore {

    @observable time ="2020";
    @observable todos=[];

    @action add(n){
       this.todos.push(n)
    };
    @action del(){
        this.todos.pop()
    };
    @action reset(){
        this.todos=[]
    };
    @action getNOW(){
        this.time=moment().format('YYYY-MM-DD HH:mm:ss')
    }
    @computed get desc(){
        return `${this.time} 还有 ${this.todos.length}任务没有完成`;
    }
}

const zero= new Appstore ();
setInterval(()=>{
    zero.getNOW();
},1000)
export  default  zero;

　　5.开发HomePage 组件

import React, {Component} from 'react';
import {inject, observer} from "mobx-react";

@inject('zero') @observer
class PageHome extends Component {
    constructor(props){
        super(props);
        this.state={

        }

    }
    handerBtn(type){
        let {zero} =this.props;
        switch (type) {
           case  'add':
               zero.add("新加数据");
               break;
           case  'del':
               zero.del();
               break;
           case  'reset':
                zero.reset();
               break;
           default:

       }
    }
    render() {
        let {zero} =this.props;
        return (
            <div className='home'>
             <h1>在React中使用MOBX</h1>
              <div> {zero.desc}</div>
                <button onClick={this.handerBtn.bind(this,'add')}>添加</button>
                <button onClick={this.handerBtn.bind(this,'del')}>删除</button>
                <button onClick={this.handerBtn.bind(this,'reset')}>重置</button>
                <div>

                    {
                        zero.todos.map((ele,index,arr)=>{
                            return(
                                <div key={index}>
                                    {ele}
                                </div>
                            )
                        })

                    }
                </div>
            </div>
        );
    }
}

export default PageHome;

6.Index.js 组件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import 'antd/dist/antd.css'
import { Provider } from 'mobx-react'
import store from './mobx'
import zero from './mobx/zero'
import Home from './PageHome'
ReactDOM.render(
       <Provider store={store}>
          <App/>
          <Home zero={zero} ></Home>
       </Provider>,

  document.getElementById('root'))

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考文章

https://zhuanlan.zhihu.com/p/150825843?from_voters_page=true

https://blog.csdn.net/qq_36380426/article/details/102738902

https://cn.mobx.js.org/

https://zhuanlan.zhihu.com/p/138820812