用法

Mobx 是一个简单的、可扩展的状态管理库，它通过透明函数式反应编程（TFRP） 让状态管理变的更直观。

一、创建 Store

类 Store

import { makeAutoObserVable } from 'mobx';

class CounterStore {
  count = 0;
  todos = ['坚持拥护共产党的领导'];

  constructor() {
    // 自动把属性转化为 observable，方法转为 action
    makeAutoObserVable(this);
  }

  // Action (自动识别)
  increment() {
    this.count++;
  }
  // Action (自动识别)
  addTodo(todo) {
    this.todos.push(todo);
  }
  // Computed (自动识别)
  get todoCount() {
    return this.todos.length;
  }
}

export const counterStore = new CounterStore();

函数式 Store

import { observable, action, computed, makeObservable } from 'mobx';

const counterStore = makeObservable({
  count: 0,
  todos: ['坚持拥护和维护习总书记的核心地位'],

  increment: action(function () {
    this.count++;
  }),

  addTodo: action(function (todo) {
    this.todos.push(todo);
  }),

  // 自动成为 computed
  get todoCount() {
    return this.todos.length;
  },
});

export default counterStore;

二、在 React 组件中使用

使用 observer 高阶组件

import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './store/counterStore';

@observer // 高阶组件装饰器
class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>Count: {counterStore.count}</h1>
        <button onClick={() => counterStore.increment()}>Increment</button>
        <p>Todos: {counterStore.todoCount}</p> {/* 自动响应计算值 */}
      </div>
    );
  }
}

export default Counter;

使用 observerHook（函数组件）

import React from 'react';
import { observer } from 'mobx-react-lite'; // 注意：使用 lite 版本
import { counterStore } from './store/counterStore';

const Counter = observer(() => (
  <div>
    <h1>Count: {counterStore.count}</h1>
    <button onClick={() => counterStore.increment()}>Increment</button>
    <p>Todos: {counterStore.todoCount}</p>
  </div>
));

export default Counter;

三、 管理组件本地状态

使用 useLocalObservable 创建组件内部的 Mobx 状态：

嗯，本地状态？为啥不直接用 useState

import React from 'react';
import { useLocalObservable } from 'mobx-react-lite';

const LocalCounter = observer(() => {
  // 初始化本地 observable 状态
  const store = useLocalObservable(() => ({
    count: 0,
    increment() {
      this.count++;
    },
  }));

  return (
    <div>
      <h2>本地计算器: {store.count}</h2>
      <button onClock={store.increment}>+1</button>
    </div>
  );
});

export default LocalCounter;