计数器案例
计数器:在组件中显示数值状态,单击+
按钮使数值加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)
现在计数器案例就做完了。