mobx

导入

import { runInAction, observable, isArrayLike, computed, observe, autorun, when, reaction, action } from 'mobx'  //isArrayLike 判断是否为数组a


import {observer,PropTypes} from "mobx-react"
  // PropTypes 定义数据类型   PropTypes.observableArray 
  //observer 修饰组件类  放在组件上面  

基本使用

const arr = observable([1, 2, 3, 4, 5])
const obj = observable({ a: 1, b: 2 })
const map = observable(new Map())
map.set('a', 2)

console.log(arr[0])
console.log(obj.a)
// console.log(map)
console.log(map.has('a')) //判断是否存在 true


var num = observable.box(20)    //number string  bool   用box包装
var str = observable.box('hello')
var bool = observable.box(true)

num.set(50)

console.log(num.get(), str.get(), bool.get())  //get获取原有类型值  set设置类型值

Api

创建可观察对象
class Store {  
    @observable array = [];
    @observable obj = {};
    @observable map = new Map();
    @observable string = 'hello';
    @observable number = 20;
    @observable bool = false;
    @computed get mixed() {
        return store.number + '//' + store.string
    }                                        //computed 对可观察数据做的反应   将多个可观察数据组合为一个可观察数据

    @action.bound bar() {         //控制 只改变一次   更利于Dbug
        this.string = '改变string'
        this.number = 222
    }
}
var store = new Store();

//computed 对可观察数据做的反应   将多个可观察数据组合为一个可观察数据

// var foo=computed(function(){return store.string+'/'+store.number})
// foo.observe(function(change){
//     console.log(change)
// })
// console.log(foo.get())
// store.string='改变string'
// store.number=222


//autorun

// autorun(()=>{  //监视状态改变  ，在数据变化时重新触发
//      console.log(store.mixed)   
// })
// store.string='改变string'
// store.number=222


// when(()=>!store.bool,()=>console.log("这是true"))  //只有第一个参数成立才执行第二个，且第一个参数需要是store中的


reaction(() => [store.string, store.number], arr => console.log(arr.join('/')))
// store.string='改变string'
// store.number=222



// var bar = store.bar;  //只调用一次
// bar();



// runInAction('aaa',() => {     // 'aaa' 选择性参数   
//     store.string = '改变stringing'
//     store.number = 22233
// })

mobx-react 应用实例

//prop-types    
 //{observer ，ObservablePropTypes}  mobx-react   引入    // observer修饰器
//创建Store 
class Store{
   @observable  cache={queue:[]}

   @action.bound refresh(){    //创建一个方法
       this.cache.queue.push(1)
   }
    
}
const store=new Store();


@observer    //修饰器  只修饰运用到被修改的观察数据 ，
class Bar entends Component {
     static prorType={
       // queue:ProrTypes.array
         queue:ObservablePropTypes.obervableArray
     };
     render(){
        const queue=this.props.queue;
        return <span>{queque.length}</span>
     }
}
@observer    //若只修饰父组件不会改变  但是最好加上不会有影响 防止依赖之间产生bug
 class Foo extends Component {
   static propTypes={
     //  cache:PropTypes.object
       cache:ObservablePropTypes.obervableObject
   };

   render () {
      const cache= this.props.cache;
      return <div>
                <button onclick={this.props.refresh}>点击button</button>
                <Bar queue={cache.queuq}/>
             </div>
      
   }
 }
 把父组件挂载  <Foo cache={store.cache} refresh={store.refresh}/>s

实例应用

​ 时间工具 //npm insatll moment -S

//store

import{ observable ,action}from 'mobx'
import moment from 'moment'
class AppStore{
    @observable time='2020'
    @observable todos=[]
    @computed get desc(){
         return '${this.time} 还有 ${this.todos.length}条未完成'
    }
    @action addTodo(todo) {
        this.todos.push(todu)
    }
    @action deleteTodo (){
        this.todos.pop()
    }
    @action resetTodo(){    //重置·
        this.todos=[]
    }
    @action getNow() {
        this.time=moment().format('YYYY-MM-DD HH:mm:ss')
    }
}
const store = new AppStore()

  setInterval(()=>{
     store.getNow()
  },1000)

export default store

//App
import {Provider} from 'mobx-react'
import store from './store'
import Home from ' home'
function App () {
  return(
     <div>
        <Provider store={store}>
            <Home/> //引入home组件
        </Provider>
     </div>
  )
}
export default App;

//index

import React from 'react'
import {inject，observer} from 'mobx-react'

@inject ('store') @observer 
export default calss Home extends React.Component{
  constructor(props){
    super(props)
    this.state={}
  }
    handleTodos（type）{
        let {store}=this.props
         switch (type) {
             case 'add':
                 store.addTodo('一条心任务')
                 break;
             case 'delete':
                 store.deleteTodo()
                 break;
             case 'reset':
                 store.resetTodo()
                 break;
             default;    
         }
    }
  render () {
     let {store}=this.props
     return (
        <div className='home'>
           <h1>在React中使用mobx</h1>
           <div>{store.desc}</div>
             <button onClick={this.handleTodos.bind(this，'add')}>添加一条</button>
             <button onClick={this.handleTodos.bind(this,'delete')}>删除一条</button>
             <button onClick={this.handleTodos.bind(this,'reset')}>重置</button>
             {
                 store.todos.map((items,index)=>{
                     return(
                         <div key={index}>{items}</div>
                     )
                 })
             }
        </div>
     )
  }

}