1. Context 基础

参考:

• 官方文档，https://zh-hans.reactjs.org/docs/context.html#___gatsby

2. mobx-react 基础

参考：

• 官方文档， https://github.com/mobxjs/mobx-react
• mobx官方文档（文档只能说不那么通俗易懂）, https://cn.mobx.js.org/

3. Context 和 mobx 结合参考示例

参考：

• https://mobx-react.js.org/recipes-context

4 具体实现

上面关于mobx的文档是真的很难读，所以时间有限，长话短说，直接上代码，其他的以后再补充

1. 创建store容器和获取store的函数

// store.js 
import React, { createContext, useContext } from 'react'
import { observable, action, configure } from 'mobx'
import { useLocalStore } from 'mobx-react'

// 强制使用action
configure({enforceActions: 'observed'})

// 创建数据由于使用了装饰器 所以使用class声明
class Store {
    @observable count = 0

    // 注意this 
    @action
    add = () => {
        this.count += 1
    }

    @action.bound
    reduce() {
        this.count -= 1
    }
}

// 创建context
const StoreContext = createContext(new Store())

// 创建context容器 就是一个函数组件
export const Provider = ({children}) => {
    // useLocalStore的参数是一个函数 返回数据源
    const store = useLocalStore(() => new Store())
    return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
}

// 其他组件获取store
export const useStore = () => {
    return useContext(StoreContext)
}

2. 使用store容器

import React from 'react';
import ReactDOM from 'react-dom';
// 根组件
import App from './App';
// 引入store.js
import { Provider } from '@/mobx/store'

// 和redux很像 用上面创建的容器包裹根组件 这样就能实现全局store
ReactDOM.render(<Provider><App/></Provider>, document.getElementById('root'));

3. 在组件中使用store

import React, {Fragment} from 'react'
import { observer } from 'mobx-react'
import { useStore } from '@/mobx/store'

// 这里是用的函数组件 class组件直接在上面用@observer就行了
const Home = observer((props) => {
  const { count, add, reduce } = useStore()
  return (
    <Fragment>
        <p>{count}</p>
        <button onClick={() => {add()}}>+</button>
        <button onClick={() => {reduce()}}>-</button>
    </Fragment>
  )
})

export default Home

下面总结一下步骤