安装

yarn add mobx@5 mobx-react@5 -S

使用

创建 mobx / store.js 用于存放状态数据

import {observable,action} from "mobx"
class Store {
    @observable number = 0; // 观察对象
    @action add = ()=>{ //严格模式下定义的对外暴露的修改方法
        this.number = 111
    }    
}
const store = new Store()
export default store

创建 app 组件 (app 组件表示父组件)

import React from "react"
import ChildA form "./childA"
import ChildB from "./childB"
import store from "./mobx/store.js"
import {Provider} from "mobx-react"
class Index extends React.component{
    render(){
        return (
            <Provider store={store}>
                <div>
                    <ChildA />
                    <ChildB />
                </div>
            </Provider>
        )
    }
}
export default Index

类组件中的使用

在组件调用 ChildA.jsx 模拟类组件的使用方式

经过高阶函数的包装后, 原始的组件的 props 中就携带了 store 的对象

import React from "react"
import {inject,observer} from "mobx-react"
​
@inject("store")
@observer
class ChildA extends React.component{
    handelClick = ()=>{
        this.props.store.add()
    }
    render(){
        return (
            <div>
                <h2>this is ChildA {this.props.store.number}</h2>
                <button onClick={handelClick}>click</button>
            </div>
        )
    }
}

函数组件中的使用

在组件中调用 ChildB 中使用函数组件

import React from "react"
import {observer} from "mobx-react"
import store from "./mobx/store"
const ChildB = ()=>{
    return (
        <div>
            <Observer>
                {
                    ()=>{
                        return (
                            <h2>this is childB {store.name}</h2>
                        )
                    }
                }
            </Observer>
        </div>
    )
}

---

函数组件中的高阶组件用法

import React from "react"
import {inject,observer} from "mobx-react"
const ChildC = (props)=>{
    const handleClick = ()=>{
       props.store.add()
    }
    return (
    	<div>
        	<p>this is ChildC {props.store.number}</p>
            <button onClick={()=>handleClick()}>click</button>
        </div>
    )
}
export default inject("store")(observer(ChildC))