1. Context 基础
参考:
2. mobx-react 基础
参考：
- 官方文档， https://github.com/mobxjs/mobx-react
- mobx官方文档（文档只能说不那么通俗易懂）, https://cn.mobx.js.org/
3. Context 和 mobx 结合参考示例
参考：
4 具体实现
上面关于mobx的文档是真的很难读，所以时间有限，长话短说，直接上代码，其他的以后再补充
- 创建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)
}
- 使用
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'));
- 在组件中使用
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
下面总结一下步骤
