# 计数器案例

计数器：在组件中显示数值状态，单击 + 按钮使数值加 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 管理状态，使组件可以修改状态和同步状态，需要做三个事情：

将状态转化为可观测的（Observable State）
将方法转化为 Action
监听组件中使用的 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)

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

mobx