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)

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值