Mobx6 基本使用

MobX 是一个简单的可扩展的状态管理库，无样板代码风格简约。

核心概念

*
observable：被 MobX 跟踪的状态。

*
action：允许修改状态的方法，在严格模式下只有 action 方法被允许修改状态。

*
computed：根据现有状态衍生出来的状态。

*
flow：执行副作用，它是 generator 函数。可以更改状态值。

准备

*
mobx：MobX 核心库

*
mobx-react-lite：仅支持函数组件

*
mobx-react：既支持函数组件也支持类组件

yarn add [email protected] [email protected]

ok ,Talk is cheap show me the code 

// 注意，counter Store 只能用类创建
// store/counter.js import { action, makeObservable, observable } from "mobx"
export default class CounterStore { constructor() { this.count = 0
makeObservable(this, { count: observable, increment: action.bound, // bound 改变
组件中 this 指向 decrement: action.bound }) } increment() { this.count += 1 }
decrement() { this.count -= 1 } }
// rootStore.js 整合各个分散的 store
// store/index.js import { createContext, useContext } from "react" import
CounterStore from "./Counter" class RootStore { constructor() {
this.counterStore = new CounterStore() } } const rootStore = new RootStore()
const RootStoreContext = createContext() export const RootStoreProvider = ({
children }) => { return ( <RootStoreContext.Provider value={rootStore}>
{children} </RootStoreContext.Provider> ) } export const useRootStore = () => {
return useContext(RootStoreContext) }
// app.js
// App.js import { RootStoreProvider } from "../store" import Counter from
"./Counter" function App() { return ( <RootStoreProvider> <Counter />
</RootStoreProvider> ) } export default App
// components/Home.js  
import { observer } from "mobx-react-lite" import { useRootStore } from
"../store" function Counter() { const { counterStore } = useRootStore() //
counterStore 里面 action.bound,就是为了 使用以下解构属性时 可以正常使用 const { count, increment,
decrement } = counterStore return ( <Container> <Button onClick={increment}>
INCREMENT </Button> <Button>{count}</Button> <Button onClick={decrement}>
DECREMENT </Button> </Container> ) } export default observer(Counter)
OK，用简洁易懂的语言和代码，说清楚前端知识，加油！！！

如有不正确，欢迎指出。。。。

• « 上一篇：防封号的原理是什么？怎样做到防封号？
• » 下一篇：数据结构和算法基础（2）——递归