MobX 学习 - 02 计数器案例

计数器案例

计数器：在组件中显示数值状态，单击+按钮使数值加1，单击重置按钮使数值重置。

下载

• mobx：MobX 核心库
• mobx-react-lite：仅支持函数组件
• mobx-react：既支持函数组件也支持类组件

由于 React 官方推荐使用函数式组件，所以下面的学习使用 mobx-react-lite

npx create-react-app app
cd app
npm install mobx mobx-react-lite

当前安装版本：

"mobx": "^6.3.0",
"mobx-react-lite": "^3.2.0",

编写组件

// src\components\Counter.js
function Counter() {
  return (
    <div>
      <span>0</span>
      <button>+</button>
      <button>重置</button>
    </div>
  )
}

export default Counter

// src\App.js
import Counter from "./components/Counter/Counter"
function App() {
  return (
    <div>
      <Counter />
    </div>
  )
}

export default App

// src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

创建 store

• MobX 中要通过 class 类创建 store 实例对象。
• 类中的属性就是 store 的状态
• 类中的方法就是修改状态的方法

// src\stores\CounterStore\CounterStore.js

class CounterStore {
  // 数值状态
  count = 10

  // 使数值+1
  increment() {
    this.count += 1
  }

  // 重置数值状态
  reset() {
    this.count = 0
  }
}

export default CounterStore

将 store 对象传递给组件

// src\App.js
import Counter from "./components/Counter/Counter"
import CounterStore from "./stores/CounterStore/CounterStore"

const counterStore = new CounterStore()

function App() {
  return (
    <div>
      <Counter counterStore={counterStore} />
    </div>
  )
}

export default App

// src\components\Counter.js
function Counter({counterStore}) {
  return (
    <div>
      <span>{counterStore.count}</span>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.reset()}>重置</button>
    </div>
  )
}

export default Counter

使用 MobX

目前为止都没有用到 MobX。

点击操作按钮，页面中展示的数值也没有发生变化，但数值确实被修改了。

要使用 MobX 管理状态，使组件可以修改状态和同步状态，需要做三个事情：

1. 将状态转化为可观测的（Observable State）
2. 将方法转化为 Action
3. 监听组件中使用的 MobX 的状态，如果状态发生变化，通知 React 更新视图

makeAutoObservable

MobX 提供了 makeAutoObservable 方法，它接收一个对象（Store），作用是：

• 将参数对象的属性设置为 Observable State
• 将参数对象的方法设置为 Action

// src\stores\CounterStore\CounterStore.js

import { makeAutoObservable } from "mobx"

class CounterStore {
  // 数值状态
  count = 10

  constructor() {
    // 将参数对象的属性设置为 Observable State
    // 将参数对象的方法设置为 Action
    makeAutoObservable(this)
  }

  // 使数值+1
  increment() {
    this.count += 1
  }

  // 重置数值状态
  reset() {
    this.count = 0
  }
}

export default CounterStore

监听组件中的 MobX 状态

mobx-react-lite 提供 observer 方法包装组件。.

observer 是一个HOC（高阶组件函数），它生成的组件可以监听 MobX 的 Observable State，当状态发生变化，通知 React 更新视图。

// src\components\Counter.js
import { observer } from 'mobx-react-lite'

function Counter({counterStore}) {
  return (
    <div>
      <span>{counterStore.count}</span>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.reset()}>重置</button>
    </div>
  )
}

export default observer(Counter)

现在计数器案例就做完了。