安装

yarn add mobx -S

基本使用

mobx 主要用到两个模块 observable (观察者) 、autorun（订阅者）

创建 mobx / store.js 用来存放需要观察的数据

import {observable} from "mobx"
const sotre = observable({
    name:'hello word'
})
export default store

在组件中使用

import {useEffect,useState} from "react"
import store from "mobx/store.js"
import {autorun} from "mobx"
​
const ChildA = ()=>{
    const [state,setState] = useState({name:""})
    useEffect(()=>{
        /** 页面初始化会加载 store 中的数据，绑定到state中来更新视图*/
        autorun(()=>{
            setState((data)=>{
                return {...data,data.name:store.name}
            })
        })
    },[])
    /** 在 mobx 非严格模式下可以直接要通过 store 去修改视图*/
    const handelClick = ()=>{
        store.name = "hello ReactMobx"
    }
    return （
        <div>
            <h2>this is ChildA {state.name}</h2>
            <button onClick={handelClick}>click</button>
        </div>
    ）
}
​

严格模式使用方法

注意 mobx 版本5 上运行,新发行的版本6.0 用法有大的变动

在 mobx / store.js

import {observable,configure, action} from 'mobx'
configure({
    enforceActions:'always'
})
​
class Store {
    @observable  name = "xxx"
    @action setName(){
      this.name = "hello world"
    }
}
const store = new Store()
export default store

在组件中使用

import React, { useEffect} from "react"
import store from "./mobx/store2"
import {autorun} from "mobx"
const ChildB = ()=>{
  useEffect(()=>{
    autorun(()=>{
      console.log(store.name)
    })
  },[])
  const handelClick = ()=>{
    store.setName()
  }
  return (
    <div>
      <h2>this is ChildB</h2>
      <button onClick={()=>handelClick()}>click</button>
    </div>
  )
}
export default ChildB